小程序循环列表,点击展开收起/关闭效果,

1、循环列表,点击展开,再次点击关闭

小程序循环列表,点击展开收起/关闭效果,

html部分
<view class="listMain"> <view class="list" wx:for="{{list}}" wx:key="index"> <view class="title">{{item.title}}</view> <view class="desc {{item.isShow ? ‘show‘ : ‘hide‘}}">{{item.desc}}</view> <text class="listBtn" bindtap="listBtn" wx:if="{{!item.isShow}}" data-index="{{index}}">展开</text> <text class="listBtn" bindtap="listBtn" wx:if="{{item.isShow}}" data-index="{{index}}">关闭</text> </view> </view>
css部分
.listMain { padding: 30rpx; } .listMain .list{ border-bottom: 1rpx solid #ddd; padding: 20rpx 10rpx; position: relative; } .listMain .list .title{ font-size: 30rpx; color: #333; width: 80%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 10rpx; } .listMain .list .desc{ font-size: 24rpx; color: #666; } .listMain .list .listBtn{ position: absolute; right: 20rpx; top: 20rpx; color: #999; font-size: 26rpx; } .show{ display: block;} .hide{ display: none;}
data部分
list: [ { title: ‘前端技术汇总‘, isShow: false, desc: ‘html、div+css+js、选择器、居中、闭包、继承、网站重构、优化、迭代、盒模型、BFC、数组、深浅拷贝、本地存储、清除浮动、状态码等等‘ }, { title: ‘前端技术框架‘, isShow: false, desc: ‘vue、angular、react、bootstrap、backbone、jquery、lay ui、amaze ui、zepot、ionic、flutter、require、echart等等‘ }, { title: ‘前端技术延伸‘, isShow: false, desc: ‘什么是前端,简单讲就是在程序开发中,跟美工设计人员打交道比较多的部分。或者讲是展现给多数用户的操作界面部分,操作界面可以是实体的(比如遥控器、按键面片等),也可以是虚拟的(比如显示器里的各种窗口)。大多数情况下,我们使用的是虚拟界面,也就是利用计算机图形功能,在显示器中画出来供我们操作的部分。虚拟界面的好处就是输入设备简单(通常一个鼠标加一块键盘就行了),还有就是灵活容易变通,如果客户对界面不太满意,改动起来相对容易点。因为是虚拟的图形,所以理论上是可以任意进行延伸的,比如二维的图形不能满足要求了,还可以三维的设计。‘ }, { title: ‘后端技术‘, isShow: false, desc: ‘很多人在开发过程中不太关注数据库,对于表结构的设计也没什么讲究大多属于“能用就行”,但是根据作者将近十年的开发经验来看的话,只要你是从事 Web 相关领域开发你就无法避免不和数据库打交道,在Web开发中大多功能操作本质上都是对数据库进行操作,不管你用是 Pythod,Java,Ruby 等语言进行 Web 开发,你其实都是在面向数据库进行编程‘ }, { title: ‘UI设计师‘, isShow: false, desc: ‘UI,即用户界面(User Interface)是系统和用户之间进行交互和信息交换的媒介。简而言之,UI设计师就是设计用户界面。一般我们手机上app的界面都是UI设计师需要设计的。通俗易懂点说,UI就是做界面的,最重要的部分是app界面,看到手机里各种app没?大部分展现在你面前的东西,都是UI设计师需要做的。‘ } ]
js点击事件
listBtn (e) { var that = this let index = e.currentTarget.dataset.index let currect = "list["+index+"].isShow" if (that.data.list[index].isShow === true) { console.log("隐藏") that.setData({ [currect]: false }) } else{ console.log("显示") that.setData({ [currect]: true }) } }

有一些情况下后台不传给你标示(isShow)这就需要自己js手动添加

下面的map以及forEach都可以手动添加isShow字段
onLoad: function () { var that = this let dataList = that.data.list // dataList.forEach(function(item, index){ // dataList[index].isShow = false // }) dataList.map((item, index)=>{ dataList[index].isShow = false }) that.setData({ list: dataList }) },

2、循环列表,点击展开,其余的关闭

data数据以及html和css代码同上面一样
listBtn (e) { let that = this let index = e.currentTarget.dataset.index let dataList = that.data.list dataList[index].isShow = !dataList[index].isShow if (dataList[index].isShow){ that.packUp(dataList,index); } that.setData({ list: dataList }) }, packUp(data,index){ for (let i = 0, len = data.length; i < len; i++) { if(index!=i){ data[i].isShow = false } } },

多层展开关闭列表

<view class=‘list_box‘ wx:for=‘{{list}}‘ wx:key=‘this‘ wx:for-item=‘parentItem‘ wx:for-index=‘parentIndex‘ >
    <view class=‘list‘>
        <view class=‘list_name_box‘ catchtap=‘listTap‘ data-parentindex=‘{{parentIndex}}‘>
            <text class=‘list_item_name‘>{{parentItem.listName}}</text>
            <text class=‘icon_down‘ wx-if=‘{{parentItem.show&&"icon_down_rotate"}}‘>关闭</text>
            <text class=‘icon_down‘ wx:else >展开</text>
        </view>
        <view class=‘list_item_box‘ wx:if=‘{{parentItem.show}}‘>
            <view class=‘list_item‘ wx:for=‘{{parentItem.item}}‘ wx:key=‘this‘ catchtap=‘listItemTap‘ data-index=‘{{index}}‘  data-parentindex=‘{{parentIndex}}‘>
                <view class=‘list_item_name_box‘>
                    <text class=‘list_item_name‘>{{item.itemName}}</text>
                    <text class=‘icon_down‘ wx:if=‘{{item.show&&"icon_down_rotate"}}‘>关闭</text>
                    <text class=‘icon_down‘ wx:else >展开</text>
                </view>
                <view class=‘other_box‘ wx:if=‘{{item.show}}‘>
                    <view class=‘other‘>
                        <text class=‘other_title‘>内容:</text>
                        <text class=‘other_text‘>{{item.content}}</text>
                    </view>
                    <view class=‘other‘>
                        <text class=‘other_title‘>时间:</text>
                        <text class=‘other_text‘>{{item.time}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>
page{
  background: #f3f7f7;
}
.list_name_box{
  background: #fff;
  border-bottom: 1px solid #efefef;
  display: flex;
  height: 90rpx;
  align-items: center;
  padding: 0 25rpx;
  font-size: 32rpx;
}
.list_item_name{
  flex: 1;
}
.list_item_name_box{
  background: #fff;
  font-size: 30rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 25rpx 0 50rpx;
}
.other{
  display: flex;
  height: 80rpx;
  padding: 0 25rpx 0 50rpx;
  align-items: center;
  font-size: 30rpx;
  color: #666;
}
.icon_down_rotate{
  transform:rotate(180deg);
}
list:[
      {listName:‘列表1‘,
       item:[{
         itemName:‘子列表1-1‘,
         content:‘1-1中的内容‘,
         time: ‘2015-05-06‘
       }, {
           itemName: ‘子列表1-2‘,
           content: ‘1-2中的内容‘,
           time: ‘2015-04-13‘
       }, {
           itemName: ‘子列表1-3‘,
           content: ‘1-3中的内容‘,
           time: ‘2015-12-06‘
       }]
      }, 
      {
        listName: ‘列表2‘,
        item: [{
          itemName: ‘子列表2-1‘,
          content: ‘2-1中的内容‘,
          time: ‘2017-05-06‘
        }, {
          itemName: ‘子列表2-2‘,
          content: ‘2-2中的内容‘,
          time: ‘2015-08-06‘
        }, {
          itemName: ‘子列表2-3‘,
          content: ‘2-3中的内容‘,
          time: ‘2015-11-06‘
        }]
      }, {
        listName: ‘列表3‘,
        item: [{
          itemName: ‘子列表3-1‘,
          content: ‘3-1中的内容‘,
          time: ‘2015-05-15‘
        }, {
          itemName: ‘子列表3-2‘,
          content: ‘3-2中的内容‘,
          time: ‘2015-05-24‘
        }, {
          itemName: ‘子列表1-3‘,
          content: ‘3-3中的内容‘,
          time: ‘2015-05-30‘
        }]
      }
    ]
//点击最外层列表展开收起
  listTap(e){
    console.log(‘触发了最外层‘);
    let Index = e.currentTarget.dataset.parentindex,//获取点击的下标值
        list=this.data.list;
    list[Index].show = !list[Index].show || false;//变换其打开、关闭的状态
    if (list[Index].show){//如果点击后是展开状态,则让其他已经展开的列表变为收起状态
      this.packUp(list,Index);
    }

    this.setData({
      list
    });
  },
  //点击里面的子列表展开收起
  listItemTap(e){
    let parentindex = e.currentTarget.dataset.parentindex,//点击的内层所在的最外层列表下标
        Index=e.currentTarget.dataset.index,//点击的内层下标
        list=this.data.list;
    console.log(list[parentindex].item,Index);
    list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//变换其打开、关闭的状态
    if (list[parentindex].item[Index].show){//如果是操作的打开状态,那么就让同级的其他列表变为关闭状态,保持始终只有一个打开
      for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){
        if(i!=Index){
          list[parentindex].item[i].show=false;
        }

      }
    }
    this.setData({list});
  },
  //让所有的展开项,都变为收起
  packUp(data,index){
    for (let i = 0, len = data.length; i < len; i++) {//其他最外层列表变为关闭状态
      if(index!=i){
        data[i].show = false;
        for (let j=0;j<data[i].item.length;j++){//其他所有内层也为关闭状态
            data[i].item[j].show=false;
        }
      }
    }
  },

 

小程序循环列表,点击展开收起/关闭效果,

上一篇:PHP 微信昵称特殊字符串过滤


下一篇:H5进阶篇--实现微信摇一摇功能