小程序实现展开隐藏列表

最新推荐文章于 2021-06-07 11:31:04 发布

原创最新推荐文章于 2021-06-07 11:31:04 发布 · 754 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种在微信小程序中通过用户点击事件动态修改CSS样式的方法。当用户点击wxml中的特定视图时，js函数会被触发，根据用户选择显示或隐藏相应的内容。通过设置数据属性和条件渲染，实现了内容的切换，同时更新了相关图片箭头的状态，以视觉上指示当前内容的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现思路

用户点击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;
}