好资源导航 » 文章资讯 » 微信小程序实现单选功能

微信小程序实现单选功能

2023-09-06 12:13:06 52

初次接触js弄了好长时间才出来效果，但是还是觉的不做梦完美，希望有更好的方式进行交流；实现效果如下：

虽说这个小功能但是对于我这个新手来说还是有点难；具体代码如下：

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:1pxsolidlightgrey;
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(vari=0;i
主要思路为循环数组的所有原素，当点击的id和i值想等的时候，就把里面的selectImage属性改为true其他的改为false，个人感觉这种写法有一定的缺陷，希望有大牛指正。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

微信小程序实现单选功能

热门推荐

随机推荐