微信小程序伸缩样式,所点击的某项展开/收缩_小程序实现点击当前箭头收缩展开

定义一个数组对象，数据中保存字段isOpen作为当前项是否为展开。每点击一次给当前点击项赋一个相反值，来设置展开收缩。

xml:
<view class="wx-app-item" wx:for="{{projects}}" wx:for-item="items" wx:key="key">
    <view> 
      <view class="wx-item">
          <text class="wx-item-name">{{items.name}}</text> 
          <view class="wx-sysname">{{items.sysName}}</view>
        <image src="../images/more.png" data-index="{{index}}" bindtap="onExpland" class="wx-more"></image>
		
        <view wx:if="{{items.isOpen}}">
          <navigator wx:for="{{items.info}}" wx:for-item="item" wx:key="key">
            <view class="wx-app-sys-name">
              <view class="wx-sysname">{{item.name}}</view>
              <view class="wx-sys-handler">负责人: {{item.name}} </view>
            </view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
js：
var projects= [
	{
		'id': '1',
		'name': 'farm1'
		'isOpen': true, // 用来判断但各项是否展开
		'info': {
			'name': 'Sanm',
			'age': '18',
			'sex': 'man',
			'tel': '1**********'
		}
	},
	{
		'id': '2',
		'name': 'farm2'
		'isOpen': true, // 用来判断但各项是否展开
		'info': {
			'name': 'Susan',
			'age': '18',
			'sex': 'man',
			'tel': '1**********'
		}
		},{
			'id': '3',
			'name': 'farm3'
			'isOpen': true, // 用来判断但各项是否展开
			'info': {
				'name': 'Tom',
				'age': '18',
				'sex': 'man',
				'tel': '1**********'
			}
		}
]

//点击事件
onExpland: function(e) {
    // 点击项目名称，收缩||展开 子系统
    var thizz = this;
    let index = e.currentTarget.dataset.index;
    let projects = thizz.data.projects;  // 定一个新变量存储数据，点击时获取当前字段并改变
    projects[index].isOpen = !projects[index].isOpen

    thizz.setData({
      projects: projects
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67