截止到目前(2017-5-19),小程序还未提供良好的toggle功能。在开发的时候,自己做了一个简单的实现。其中还遇到了一些其他的小麻烦,这里与大家探讨:
情景:从远端获取数据,在小程序界面展现标题列表,点击标题查看详情。
实现
1):获取数据后,只展现标题,把详情隐藏起来。显然这里需要增加一个开关,标题增加一个点击事件,控制详情展现:
`<block wx:for="{{logisticsList}}" wx:key="this" wx:for-item="logistics" ><view class="num-name" data-index="{{index}}" bindtap="logToggle">运单编号:{{logistics.sn}}</view>`,`<view wx:if="{{logistics.toggle}}">这里是内容什么的-----</view>`;
2):这个开关变量不是远程数据logisticsList里面就有的,需要我们自己添加。logisticsList是一个包含若干对象的数组,每个对象就是我们要展示的数据,包括标题,具体内容之类的。现在给每个对象添加toggle开关。
`
that.data.logisticsList.forEach(function(item){
item.toggle = false
})`
,这里的‘that’是什么?随便一个onShow或者onLoad函数里面的‘this’,--- var that = this;
(这里可以直接用this,因为有时会用到回调函数,所以一贯习惯用that代替this)。这一步仅仅给原始数据增加了属性,数据得到改变,但页面并不会显示效果,就是toggle不生效,内容没被隐藏。所以还需一步:
`that.setData({
logisticsList: that.data.logisticsList
})`;
3):好了,现在页面就有标题了。来实现我们的点击函数---logToggle,参数是寒碜的index。改变这个数组中某个对象的toggle属性,例如:logisticsList[0].toggle = false/true。然而,那个中括号里面的是变化的所以只好构造一个变化的字符串咯:
(相信这个肯定是坑住了一部分人,得到启发的还不赶紧点赞!!!)
‘logisticsList[‘ + index + ‘].toggle‘,
`
logToggle:function(e){
let index = e.currentTarget.dataset.index,
nowToggle = this.data.logisticsList[index].toggle;
this.setData({
[‘logisticsList[‘ + index + ‘].toggle‘]: !nowToggle
})
}`;
细心的同志会发现setData()函数里面传递的参数其实是一个对象{},所以你完全可以在外部构造一个对象塞进去:`
logToggle:function(e){
//构造一个对象:param;设置要改变的参数:str;赋值 =
let param = {};
let index = e.currentTarget.dataset.index,
nowToggle = this.data.logisticsList[index].toggle,
str = ‘logisticsList[‘ + index +‘].toggle‘;
param[str] = !nowToggle;
this.setData(param)
} `。
4):测试结果:两种方法都可用,楼主选用构造对象(为避免受到520朋友圈的冲击,勉强做个防御)!
5):本次分享缺憾是没有动画,闪现不友好。
结语:点击事件实现隐藏展现的实现方法极多,比如你可以做一个弹窗展示细节,点击弹窗隐藏则隐藏。方法多多,看需求构造。各位大神,小将的这次分享就到这里,欢迎指正!