在微信小程序里 有下拉功能 如果循環(huán)列表 當(dāng)執(zhí)行點(diǎn)擊事件的時(shí)候就會(huì)同時(shí)執(zhí)行。下面主要實(shí)現(xiàn)了循環(huán)列表的點(diǎn)擊事件操作。（也有數(shù)據(jù)里面嵌套數(shù)據(jù)）

wxml

<view class="sele" bindtap='bindShowMsg' data-id="{{item.user_id}}" wx:for='{{list}}' wx:for-item="item" wx:key='index'> <view class="sele_c"><view class="sele_imag"><image src="{{item.user_image}}"></image></view><view class="sele_text"><text>{{item.user_name}}</text></view><view class="sele_img"><image src="../../image/xiala.png"></image></view> </view><!-- 下拉 wx:if="{{select}}"--><view class="sele_top {{item.editTrue?'isRuleHide':'isRuleShow'}}"><view class="seles" wx:for='{{item.two}}' wx:for-item="items" wx:key='indexx'><view class="sele_imags"><image src="{{items.user_image}}"></image></view><view class="sele_imgs"><text>{{items.user_name}}</text></view></view></view></view>

js

Page({/*** 頁面的初始數(shù)據(jù)*/data: {list: [{user_id: 1005000,user_name: "居家",good: [{id: 1009,user_name: "日式和風(fēng)懶人沙發(fā)",user_image: "http://yanxuan.nosdn.127.net/149dfa87a7324e184c5526ead81de9ad.png",retail_price: 599},{id: 1030,user_name: "160*230羊毛手工幾何地毯",user_image: "http://yanxuan.nosdn.127.net/1d1ab099dc0e254c15e57302e78e200b.png",retail_price: 1469},]},{user_id: 1005,user_name: "餐廚",goodsList: [{user_id: 1023003,user_name: "100年傳世琺瑯鍋 全家系列",user_image: "http://yanxuan.nosdn.127.net/c39d54c06a71b4b61b6092a0d31f2335.png",retail_price: 398},{user_id: 1025,user_name: "100年傳世琺瑯鍋",user_image: "http://yanxuan.nosdn.127.net/49e26f00ca4d0ce00f9960d22c936738.png",retail_price: 268}, ]},]},// 下拉bindShowMsg(e) {console.log(e)var id=e.currentTarget.dataset.id// this.setData({// select: !this.data.select// })let index = 0;let arrayItem = this.data.list; //獲取循環(huán)數(shù)組對象for (let item of arrayItem) {//如果當(dāng)前點(diǎn)擊的對象id和循環(huán)對象里的id一致if (item.user_id == id) {//判斷當(dāng)前對象中的isShow是否為true（true為顯示，其他為隱藏） if (arrayItem[index].editTrue == "" || arrayItem[index].editTrue == undefined) {arrayItem[index].editTrue = "true"} else {arrayItem[index].editTrue = ""}}index++;}//將數(shù)據(jù)動(dòng)態(tài)綁定 this.setData({list: arrayItem})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶點(diǎn)擊右上角分享*/onShareAppMessage: function () {} })

wxss

page {background-color: #F3F3F3; }.sele {width: 100%;/* height: 100rpx; *//* display: flex; */background: #fff;border-bottom: 1rpx solid #F3F3F3; } .sele_c{width: 100%;display: flex;height: 100rpx;position: relative; } .sele_top{width: 100%;} .sele_imag {width: 17%;height: 100rpx;display: flex;align-items: center;justify-content: flex-end; }.sele_imag image {width: 50rpx;height: 50rpx;margin-right: 33rpx; }.sele_text {width: 65%;height: auto;display: flex;align-items: center;font-size: 30rpx; }.sele_img {width: 20%;height: auto;display: flex;align-items: center;justify-content: center; }.sele_img image {width: 33rpx;height: 16rpx; }/* 下拉 */ .seles {width: 100%;height: 100rpx;display: flex;background: #fff;border-bottom: 1rpx solid #F3F3F3;overflow: hidden;animation: myfirst 0.5s; } /* */ .isRuleShow {display: none;}.isRuleHide {display: block; } .sele_imags {width: 24%;height: 100rpx;display: flex;align-items: center;justify-content: flex-end; }.sele_imags image {width: 50rpx;height: 50rpx;margin-right: 33rpx; }.sele_imgs {width: auto;height: 100rpx;display: flex;align-items: center;justify-content: center;font-size: 28rpx;color: #000; }@keyframes myfirst {from {height: 0rpx;}to {height: 100rpx;} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的微信小程序实现循环列表下拉功能（点击事件）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。