微信小程序实现单选功能
网络编程 2021-07-04 16:47www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现单选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
初次接触js弄了好长时间才出来效果,还是觉的不做梦完美,希望有更好的方式进行交流;实现效果如下
虽说这个小功能对于我这个新手来说还是有点难;具体代码如下
WXML
<view class="backgrout-bj"> <view class="header"> 最多可增加4个功能入口 </view> <view> <block wx:for="{{model}}"> <view class="model-list" bindtap="selectClick" id="{{index}}"> <view> <image class="middle-img" src="{{item.image}}"></image> </view> <view class="middle-title"> <view><text>{{item.title}}</text></view> <view class="middle-sub"><text>{{item.sub_title}}</text></view> </view> <!--<view hidden="{{item.selectImage}}"> <image src="../image/xuanze.png" class="seletedImage"></image> </view>--> <view wx:if="{{item.selectImage==true}}"> <image src="../image/xuanze.png" class="seletedImage"></image> </view> </view> </block> </view> </view>
从大的分科分为两个大块一个是上面的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-: 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(){ // 页面关闭 } })
主要思路为循环数组的所有原素,当点击的id和i值想等的时候,就把里面的selectImage属性改为true 其他的改为false,个人感觉这种写法有一定的缺陷,希望有大牛指正。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程