小程序实现展开隐藏列表

一、实现思路

用户点击wxml中的某个事件后，会触发js中的函数，该函数可以动态修改css样式，效果如图所示。

二、代码

wsml：

<view class='display-title' catchtap="showHidden" data-id="1">
		<image class="list-icon-left" src="../../images/list.png"></image><text class="title-text">宣传教育</text>
		<image class="list-icon-right" src="{{arrow[0].url}}"></image>
	</view>
	<view class="{{arrow[0].css}}">
		<block wx:for="{{propagate}}" wx:key="index">
		<view wx:if="{{item.type == 1}}">
			<view class='text-content' catchtap="catchTapPropagate" data-id="{{item.id}}">{{item.title}}</view>
			</view>
		</block>
	</view>
	<view class='display-title' catchtap="showHidden" data-id="2">
		<image class="list-icon-left" src="../../images/list.png"></image><text class="title-text">法制法规</text>
		<image class="list-icon-right" src="{{arrow[1].url}}"></image>
	</view>
	<view class="{{arrow[1].css}}">
		<block wx:for="{{propagate}}" wx:key="index">
		<view wx:if="{{item.type == 2}}">
			<view class='text-content' catchtap="catchTapPropagate" data-id="{{item.id}}">{{item.title}}</view>
			</view>
		</block>
	</view>
	<view class='display-title' catchtap="showHidden" data-id="3">
		<image class="list-icon-left" src="../../images/list.png"></image><text class="title-text">案例警示</text>
		<image class="list-icon-right" src="{{arrow[2].url}}"></image>
	</view>
	<view class="{{arrow[2].css}}">
		<block wx:for="{{propagate}}" wx:key="index">
		<view wx:if="{{item.type == 3}}">
			<view class='text-content' catchtap="catchTapPropagate" data-id="{{item.id}}">{{item.title}}</view>
		</view>
		</block>
	</view>

js：

 data: {
    arrow:[{url:"../../images/down.png",css:"content-hidden",state:0},    
           {url:"../../images/down.png",css:"content-hidden",state:0}, 
           {url:"../../images/down.png",css:"content-hidden",state:0}],
}
showHidden: function (e) {
  var that=this
  var id = e.currentTarget.dataset.id;
  console.log(that.data.arrow)
  if(id==1){
    if(that.data.arrow[0].state==0){
      that.setData({
        'arrow[0].url':'../../images/up.png',
        'arrow[0].css':'content-show',
        'arrow[0].state':1,
      })
    }else{
      that.setData({
        'arrow[0].url':'../../images/down.png',
        'arrow[0].css':'content-hidden',
        'arrow[0].state':0,
      })
      }
  }else if(id==2){
    if(that.data.arrow[1].state==0){
      that.setData({
        'arrow[1].url':'../../images/up.png',
        'arrow[1].css':'content-show',
        'arrow[1].state':1,
      })
    }else{
      that.setData({
        'arrow[1].url':'../../images/down.png',
        'arrow[1].css':'content-hidden',
        'arrow[1].state':0,
      })
      }
  }else{
    if(that.data.arrow[2].state==0){
      that.setData({
        'arrow[2].url':'../../images/up.png',
        'arrow[2].css':'content-show',
        'arrow[2].state':1,
      })
    }else{
      that.setData({
        'arrow[2].url':'../../images/down.png',
        'arrow[2].css':'content-hidden',
        'arrow[2].state':0,
      })
      }
  }
},

wxss：

.content-hidden{
  width: 100%;
  font-size: large;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: none;
}
.content-show{
  width: 100%;
  font-size: large;
  font-family: Georgia, 'Times New Roman', Times, serif;
  display: block;
}