电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

微信小程序新手教程之js實現單選功能

瀏覽:150日期:2022-07-16 08:00:48

微信小程序新手教程之js實現單選功能,本篇默認已經成功安裝微信小程序工具,來和小編一起看看吧

接觸js弄了好長時間才出來效果,但是還是覺的不做夢完美,希望有更好的方式進行交流:

雖說這個小功能但是對于我這個新手來說還是有點難;具體代碼如下:

WXML:

[html] view plain copy

最多可增加4個功能入口

微信小程序新手教程之js實現單選功能

{{item.title}}

{{item.sub_title}}

-->

微信小程序新手教程之js實現單選功能

從大的分科分為兩個大塊一個是上面的header 剩下的列表是另外一個部分,列表中又分為若干個小塊,本打算寫個模版,但是感覺這樣更清晰

WXSS:

[css] view plain copy.backgrout-bj{

flex-wrap: wrap;

}

.backgrout-bj .header{

display: block;

font-size: 13px;

text-align: center;

color: orange;

padding: 10px;

width: 100%;

}

.model-list{

border-bottom: 1px solid lightgrey;

display: flex;

align-items: center;

}

.middle-img{

padding: 10px;

width: 70px;

height: 70px;

display: block;

flex: 1;

overflow: hidden;

}

.middle-title{

margin: 10px;

display: block;

}

.middle-sub{

font-size: 14px;

color: lightgray;

margin-top: 10px;

}

.seletedImage{

width: 20px;

height: 20px;

}

可能有些亂,希望大牛糾正;

JS:

[javascript] view plain copyPage({

data:{

// text:"這是一個頁面"

model:[

{

image:'../image/guapai_icon.png',

title:'掛牌',

sub_title:'進行松香交易,松香買賣。。。',

selectImage:false

},

{

image:'../image/tianjia_maoyi.png',

title:'貿易',

sub_title:'根據需求,快速的為您提供服務',

selectImage:true

}

]

},

selectClick:function(event){

// this.data.model[event.currentTarget.id].selectImage

for(var i = 0; i < this.data.model.length;i++){

if(event.currentTarget.id == i){

this.data.model[i].selectImage = true

}

else

{

this.data.model[i].selectImage = false

}

}

this.setData(this.data)

},

onLoad:function(options){

// 頁面初始化 options為頁面跳轉所帶來的參數

},

onReady:function(){

// 頁面渲染完成

},

onShow:function(){

// 頁面顯示

},

onHide:function(){

// 頁面隱藏

},

onUnload:function(){

// 頁面關閉

}

})

主要思路為循環數組的所有原素,當點擊的id和i值想等的時候 就把里面的selectImage屬性改為true 其他的改為false,個人感覺這種寫法有一定的缺陷,希望有大牛指正

下面小編就給大家介紹一種一個小程序吧

嗨圖功能

微信小程序新手教程之js實現單選功能

1、專題——DIY圖片的模板,點擊可以生成使用,分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產品的改進,內容的增加。

想要體驗怎么制作屬于自己個性朋友圈照片的用戶,掃一掃下面的二維碼就可以啦!還等什么,趕緊掃碼體驗,開啟你的嗨圖之旅吧!

微信小程序新手教程之js實現單選功能
標簽: 微信
相關文章:
主站蜘蛛池模板: 一点车讯-汽车网站,每天一点最新车讯! | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | PE一体化污水处理设备_地埋式生活污水净化槽定制厂家-岩康塑业 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 博医通医疗器械互联网供应链服务平台_博医通 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 注塑机-压铸机-塑料注塑机-卧式注塑机-高速注塑机-单缸注塑机厂家-广东联升精密智能装备科技有限公司 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 旋转/数显粘度计-运动粘度测定仪-上海平轩科学仪器 | 英超直播_英超免费在线高清直播_英超视频在线观看无插件-24直播网 | 双相钢_双相不锈钢_双相钢圆钢棒_双相不锈钢报价「海新双相钢」 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | bng防爆挠性连接管-定做金属防爆挠性管-依客思防爆科技 | 100_150_200_250_300_350_400公斤压力空气压缩机-舰艇航天配套厂家 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 钢衬四氟管道_钢衬四氟直管_聚四氟乙烯衬里管件_聚四氟乙烯衬里管道-沧州汇霖管道科技有限公司 | 沈阳激光机-沈阳喷码机-沈阳光纤激光打标机-沈阳co2激光打标机 | 西门子伺服电机维修,西门子电源模块维修,西门子驱动模块维修-上海渠利 | 智慧食堂_食堂管理系统_食堂订餐_食堂消费系统—客易捷 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | 专业深孔加工_东莞深孔钻加工_东莞深孔钻_东莞深孔加工_模具深孔钻加工厂-东莞市超耀实业有限公司 | 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 真空乳化机-灌装封尾机-首页-温州精灌 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 预制直埋蒸汽保温管-直埋管道-聚氨酯发泡保温管厂家 - 唐山市吉祥保温工贸有限公司 | 电缆故障测试仪_电缆故障定位仪_探测仪_检测仪器_陕西意联电气厂家 | 万濠投影仪_瑞士TRIMOS高度仪_尼康投影仪V12BDC|量子仪器 | 济南轻型钢结构/济南铁艺护栏/济南铁艺大门-济南燕翔铁艺制品有限公司 | 深圳市人通智能科技有限公司| 作文导航网_作文之家_满分作文_优秀作文_作文大全_作文素材_最新作文分享发布平台 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 岩石钻裂机-液压凿岩机-劈裂机-挖改钻_湖南烈岩科技有限公司 | 控显科技 - 工控一体机、工业显示器、工业平板电脑源头厂家 | 中矗模型-深圳中矗模型设计有限公司 | 广西教师资格网-广西教师资格证考试网| 单机除尘器 骨架-脉冲除尘器设备生产厂家-润天环保设备 | 广东护栏厂家-广州护栏网厂家-广东省安麦斯交通设施有限公司 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 |