小程序 toggle ，列表的展现和隐藏

harryhappy 发布于2019-08-20 16:41 / 2056人阅读

摘要：截止到目前，小程序还未提供良好的功能。在开发的时候，自己做了一个简单的实现。实现获取数据后，只展现标题，把详情隐藏起来。这一步仅仅给原始数据增加了属性，数据得到改变，但页面并不会显示效果，就是不生效，内容没被隐藏。

截止到目前（2017-5-19），小程序还未提供良好的toggle功能。在开发的时候，自己做了一个简单的实现。其中还遇到了一些其他的小麻烦，这里与大家探讨：

情景：从远端获取数据，在小程序界面展现标题列表，点击标题查看详情。

实现
1）：获取数据后，只展现标题，把详情隐藏起来。显然这里需要增加一个开关，标题增加一个点击事件，控制详情展现：

`运单编号：{{logistics.sn}}`，`这里是内容什么的-----`；

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）：本次分享缺憾是没有动画，闪现不友好。

结语：点击事件实现隐藏展现的实现方法极多，比如你可以做一个弹窗展示细节，点击弹窗隐藏则隐藏。方法多多，看需求构造。各位大神，小将的这次分享就到这里，欢迎指正！

GPU云服务器云服务器个人小程序和公司小程序的区别小程序的开发和发布小程序和公众号的区别微信小程序和云服务器沟通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83086.html

ES6-Generator与react状态机（13）

摘要：同理，你只要知道改变状态能够实现要的功能，大体上的原理就是状态机就可以了。总结，本文重点状态机模式的使用场景，复杂多状态的管理，这里注意你没必要写个选项卡之类的用状态机，那反而是给自己找麻烦。大家在写App和一些单页面程序的时候，经常会遇到这样的情况：showImg(https://segmentfault.com/img/bVbsNaA?w=240&h=427);当点击左边的箭头的...

alphahans 2019-08-26 13:49 评论0 收藏0
React-Redux小应用（一）-React_Redux_Appointment

摘要：先来一波硬广我的博客欢迎观光传送门这个小应用使用创建演示地址，地址。这是之前的的版，之前的演示，改写自的课程。 React-Redux-Appointment 先来一波硬广：我的博客欢迎观光：传送门这个小应用使用Create React App创建,演示地址:https://liliang-cn.github.io/react_redux_appointment，repo地址：http...

CoorChice 2019-08-21 11:22 评论0 收藏0
纯CSS实现点击事件展现隐藏div菜单列表/元素切换

摘要：在写移动端导航的时候经常用到点击按钮出现隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错当然还有使用纯实现的小代码段。另外使用作为选择器仅为了兼容更低版本的在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式，给需要的人和给自己做个笔记： ...

番茄西红柿 2019-04-23 11:50 评论0 收藏0
微信小程序的按钮toogle效果

摘要：但是我们又要实现，连续点击两次同一个按钮时，这个一级菜单有效果，如果像上面那样把恢复初始值，就不能实现效果。这时的两个数组的完全独立的。创建一个公用的导航navBar组件，让它可以在所有页面使用，比如在index.wxml,引用navBar组件，方法如下 1.在需要引用组件的页面中的json中定义这个组件 //index.json { usingComponents: { ...

Seay 2019-08-22 16:57 评论0 收藏0
React Motion 缓动函数剖析

摘要：大家可以尝试使用的，配置一个合适的劲度系数和空气阻力。所做的事，只不过自己实现了一套缓动函数。根据经典力学的观点，世界上所有的原子每时每刻仿佛都会根据当前速度、受力和位置计算出下一刻的速度、受力和位置。上帝有一台超级计算机吗？非也，反而计算机是我们利用原子的这些特性拼装出来的。现在，我们却要用计算机，像上帝那样，再造一个世界。我不知道这个世界上有没有仿世学，但是既然动画是要模仿现实...

wfc_666 2019-08-19 17:18 评论0 收藏0