微信小程序循环修改某项

问题描述

问 题

 lock:false

  // 长按弹出删除框
  showPop:function (e) {
     var key = e.target.dataset.key
    this.setData({ lock: true });
    console.log(this.data.lock)
   
    this.setData({
      showViewFlag:true
    })
    
  },
  hidePop:function(){
    if (this.data.lock) {
      return;
    } 
    else{
      this.setData({
        showViewFlag: false
      })
    }
  },
  touchend: function () {
    if (this.data.lock) {
      //开锁
      setTimeout(() => {
        this.setData({ lock: false });
      }, 100);
    }
  },

<view  bindtap="userinfo" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
       </view>
       <view class="arrow-left"> </view>
       <!--长按弹出删除框-->
       <text class="item-content "  bindlongtap="showPop">{{item.text}}</text>
       <!--长按的弹出操作框-->
       <view  class="{{showViewFlag?'showView':'hideView'}} logtabPop" bindtap="deleteItem" data-key="{{item.key}}">
          删除
       </view>

现在是这样的 循环生成多项
长按弹出删除

但是由于微信长按触发点击的Bug我加了锁lock

现在我一长按
所有的删除框都弹出来了
怎么才能只让当前的显示

解决方案

重新整理了下代码，实现功能：长按消息弹出菜单，点击菜单中的删除，删除此条消息。

效果：

wxml:

<!--test.wxml-->
<view style="padding-top:30px;">
    <view wx:for="{{loop}}" wx:key="id" bindlongtap="ltap" data-id="{{item.id}}"  class="{{item.class}}" style="display:{{item.visible}};">
        {{item.opt}} 
        <view class="sharp"></view>
        <view class="headico"><image src="{{item.head}}" mode="aspectFill" class="headimg"></image></view>
        <view wx:if="{{ item.id == value }}" class="anniu">
            <view bindtap="click_blank" class="mask"></view> 
            <view bindtap="del" class="deleteBtn" data-id="{{item.id}}">
                删除
                <view class="del-sharp"></view>
            </view>
        </view>
        <view wx:else></view>
    </view>
</view>

wxss:

/* test.wxss */

.message {
  text-align: left;
  margin-top: 20px;
  margin-left: 60px;
  background: #fff;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: left;
  clear: both;
  border: 1px solid #dedede;
  position: relative;
}

.send {
  text-align: left;
  margin-top: 20px;
  margin-right: 60px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  color: #333;
  border-radius: 5px;
  padding: 5px 20px;
  max-width: 50%;
  float: right;
  clear: both;
  position: relative;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 1;
}

.message .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.del-sharp {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  background: #303538;
  transform: rotate(45deg);
}

.send .deleteBtn {
  position: absolute;
  top: -45px;
  background: #303538;
  color: #fff;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
}

.message .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  left: -5px;
  top: 12px;
  background: #fff;
  border: 1px solid #dedede;
  border-top: none;
  border-right: none;
}

.send .sharp {
  background: red;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  right: -5px;
  top: 12px;
  background: #a6d94e;
  border: 1px solid #a6d94e;
  border-top: none;
  border-right: none;
}

.message .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  left: -50px;
  background: #fff;
}

.send .headico {
  width: 33px;
  height: 33px;
  border: 1px solid #dedede;
  position: absolute;
  top: 0;
  right: -50px;
  background: #fff;
}

.headimg {
  width: 33px;
  height: 33px;
}

js:

// test.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        loop: [
            {
                opt: "监听页面加载",
                id: 1,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "监听页面初次渲染完成",
                id: 2,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "监听用户下拉动作",
                id: 3,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
            {
                opt: "页面上拉触底事件的处理函数",
                id: 4,
                head: '../images/icon_contact_wx.png',
                class: 'send',
                visible: 'block'
            },
            {
                opt: "用户点击右上角分享",
                id: 5,
                head: '../images/icon_contact_wx.png',
                class: 'message',
                visible: 'block'
            },
        ],
        value: 0
    },
    ltap: function (e) {
        this.setData({
            value: e.target.dataset.id
        })
    },
    del: function (e) {
        var index = e.target.dataset.id - 1
        var param = {};
        var string = "loop[" + index + "].visible"
        param[string] = 'none';
        this.setData(param);
    },
    click_blank: function (e) {
        this.setData({
            value: 0
        })
    }
})

这篇关于微信小程序循环修改某项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！