小程序的多列表的展示与隐藏

项目下载：

1.https://download.csdn.net/download/mo3408/10727141

2.下载:https://www.lanzous.com/i24jlvc  密码：eng4

3.链接：https://share.weiyun.com/5tKPpcO 密码：kpgvdi(永久）

1.一开始没有展开前：

展开后是：

页面的代码：

<!--index.wxml-->
 <!-- 内容信息 -->
  <view class='content'>

    <block wx:for="{{systemList}}">
      <!-- 列表 -->
      <view class='list'>
        <view class='list_title'>{{item.title}}</view>
        <view class="list_info {{item.hidden?'hide':'show'}}" >{{item.contentH}}</view>
        <image src="{{item.image}}" class='down'  data-id="{{item.id}}" bindtap='moreInfo'></image>
        <view class='time'>{{item.time}}</view>
      </view>
      <!-- 列表 -->
      </block>

    </view>

js如下：

//index.js模拟数据
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isFold: false,
    nowToggle:'',
    systemList: [{
      id: 0,
      hidden: true,
      title: '系统公告',
      contentH: '关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往',
      time: '2018-02-10 18:05:42',
      image: '../../img/up.png'
    },
    {
      id: 1,
      hidden: true,
      title: '系统公告',
      contentH: '关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往',
      time: '2018-03-15 18:05:42',
      image: '../../img/up.png'
    },
    {
      id: 2,
      hidden: true,
      title: '系统公告',
      contentH: '关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往',
      time: '2018-05-11 18:05:42',
      image: '../../img/up.png'
    },
    {
      id: 3,
      hidden: true,
      title: '系统公告',
      contentH: '关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往,关于2018年月1日前使用平台消费并处于待退款状态的的1.如果会员在2018年1月日以前在会员店铺进行...；2.如果您的退款情况变为已退款状态，请及时前往请及时前往11111111111111111111',
      time: '2018-06-14 18:05:42',
      image:'../../img/up.png'
    },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


  },
 
  //展开更多
  moreInfo: function (e) {
    var id=e.currentTarget.dataset.id
    var systemList=this.data.systemList
    var that=this
    var hide=systemList[id].hidden

    if(systemList[id].image=="../../img/down.png"){
    
      that.setData({
        ['systemList['+id+'].hidden']:!hide,
        ['systemList[' + id + '].image']:'../../img/up.png'
      })

    }else{
      that.setData({
        ['systemList[' + id + '].hidden']:!hide,
        ['systemList[' + id + '].image']: '../../img/down.png',
    
      })
      console.log(systemList)
   
    }
  
 
    
  },
})