怎么在微信小程序中实现单选功能
今天就跟大家聊聊有关怎么在微信小程序中实现单选功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
为泰顺等地区用户提供了全套网页设计制作服务,及泰顺网站建设行业解决方案。主营业务为做网站、成都网站设计、泰顺网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
WXML:
最多可增加4个功能入口 {{item.title}} {{item.sub_title}}
从大的分科分为两个大块一个是上面的header 剩下的列表是另外一个部分,列表中又分为若干个小块,本打算写个模版,但是感觉这样更清晰
WXSS:
.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:
Page({ 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(){ // 页面关闭 } })
看完上述内容,你们对怎么在微信小程序中实现单选功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
分享文章:怎么在微信小程序中实现单选功能
网页链接:http://scyanting.com/article/isjcjp.html