问题答疑，点击显示，再次点击闭合，请问怎么实现啊？如图
发布于 6 年前 作者 mingshen 17198 次浏览 来自 问答

实现如图效果，请多多指教

6 回复

页面 index.wxml：

<block
    wx:for="{{detailArr}}"
    wx:key="{{item.id}}">
    <view
        id="{{item.id}}"
        bindtap="showDetail">{{item.name}}</view>
    <view wx:if="{{item.active}}">{{item.detail}}</view>
</block>

代码 index.js

const app = getApp();
 
Page({
    data: {
        detailArr: [{
            id: 1,
            name: '点我出现详情1',
            detail: '详情1',
            active: false,
        }, {
            id: 2,
            name: '点我出现详情2',
            detail: '详情2',
            active: false,
        }, ],
    },
    showDetail(e) {
        this.setData({
            detailArr: this.data.detailArr.map(item => {
                if (item.id == e.currentTarget.id) {
                    item.active = !item.active;
                }
 
                return item;
            })
        });
    },
    onLoad(options) {
 
    },
    onReady() {
 
    },
    onShow() {
        
    },
    onHide() {
 
    },
    onUnload() {
 
    },
    onPullDownRefresh() {
 
    },
    onReachBottom() {
 
    },
})

js 里 好像加不了。。。

谢谢，果然有效。。。

  detailArr: this.data.detailArr.map(item => {

        if (item.id == e.currentTarget.id) {

          item.active = !item.active;

        }

        return item;

      })

关键点在这，item =>   请问这个表示什么？

这是 es6 的 写法

等同于 es5

detailArr: this.data.detailArr.map(function(item) {
        if (item.id == e.currentTarget.id) {
          item.active = !item.active;
        }
 
        return item;
      })

原来我知道的真少。。请问在js里怎么添加wxss样式？

求大神指点。。有想法的可以说说

回到顶部