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

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

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

瀏覽:147日期: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實現單選功能
標簽: 微信
相關文章:
主站蜘蛛池模板: 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 不锈钢拉手厂家|浴室门拉手厂家|江门市蓬江区金志翔五金制品有限公司 | 探伤仪,漆膜厚度测试仪,轮胎花纹深度尺厂家-淄博创宇电子 | 新疆十佳旅行社_新疆旅游报价_新疆自驾跟团游-新疆中西部国际旅行社 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 振动台-振动试验台-振动冲击台-广东剑乔试验设备有限公司 | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 | 刑事律师_深圳著名刑事辩护律师_王平聚【清华博士|刑法教授】 | 高铝矾土熟料_细粉_骨料_消失模_铸造用铝矾土_铝酸钙粉—嵩峰厂家 | 北京燃气公司 用户服务中心| 自清洗过滤器-全自动自清洗过反冲洗过滤器 - 中乂(北京)科技有限公司 | 菲希尔X射线测厚仪-菲希尔库伦法测厚仪-无锡骏展仪器有限责任公司 | 爆破器材运输车|烟花爆竹运输车|1-9类危险品厢式运输车|湖北江南专用特种汽车有限公司 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 | 美国PARKER齿轮泵,美国PARKER柱塞泵,美国PARKER叶片泵,美国PARKER电磁阀,美国PARKER比例阀-上海维特锐实业发展有限公司二部 | 井式炉-台车式回火炉-丹阳市电炉厂有限公司 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | 四川实木门_成都实木门 - 蓬溪聚成门业有限公司 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 爆炸冲击传感器-无线遥测传感器-航天星百科 | 重庆磨床过滤机,重庆纸带过滤机,机床伸缩钣金,重庆机床钣金护罩-重庆达鸿兴精密机械制造有限公司 | 北京翻译公司_同传翻译_字幕翻译_合同翻译_英语陪同翻译_影视翻译_翻译盖章-译铭信息 | 空气能采暖,热泵烘干机,空气源热水机组|设备|厂家,东莞高温热泵_正旭新能源 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 粒米特测控技术(上海)有限公司-测功机_减速机测试台_电机测试台 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 西门子伺服电机维修,西门子电源模块维修,西门子驱动模块维修-上海渠利 | X光检测仪_食品金属异物检测机_X射线检测设备_微现检测 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 |