微信小程序实现跟随菜单效果和循环嵌套加载数据
本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml <scroll-view class="right" scroll-y bindscroll="scroll" scroll-into-view="{{toView}}"> <view class="title"> <view class="li" wx:for="{{item.li}}"> js
_click:j //控制左侧点击后样式
})
},})
wxss .left{
height:100%; width: 19%; display: inline-block; background:#fff; text-align:center; border-right:1px solid #eee; } .leftlist{ font-size:12px; padding:10px; } .right{ .line{ .li{ .li image{width:60px;height:60px;} .li .name{ .title{padding:20px 0;} 友情提示:1、左侧点击样式改变: 利用自身index与点击的元素的index比较。 data-i=“{{获取当前index传给_click保存}}”, class=”leftlist {{index==_click?'yes':”}}”, 此处index是自身的,如果自身和点击的一致就添加,yes类名,否侧滞空清除yes样式。 2、点击左侧,右侧跟随: 利用scroll-into-view=”{{id}}”, 视图会滚动到id为此id的view标签。我是直接从data数据里取得id,也可以直接获取点击元素id。 3、循环嵌套:data数据格式写对,按照官方文档就行。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |