微信小程序实现循环列表下拉功能（点击事件）

在微信小程序里有下拉功能如果循环列表当执行点击事件的时候就会同时执行。下面主要实现了循环列表的点击事件操作。（也有数据里面嵌套数据）

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>

Page({/*** 页面的初始数据*/data: {list: [{user_id: 1005000,user_name: "居家",good: [{id: 1009,user_name: "日式和风懒人沙发",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; //获取循环数组对象for (let item of arrayItem) {//如果当前点击的对象id和循环对象里的id一致if (item.user_id == id) {//判断当前对象中的isShow是否为true（true为显示，其他为隐藏） if (arrayItem[index].editTrue == "" || arrayItem[index].editTrue == undefined) {arrayItem[index].editTrue = "true"} else {arrayItem[index].editTrue = ""}}index++;}//将数据动态绑定 this.setData({list: arrayItem})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/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;}
}

微信小程序实现循环列表下拉功能（点击事件）相关推荐

微信小程序直播间实现下拉刷新(目前全网最优最美观的方法)
微信小程序直播间实现下拉刷新先上效果: 1.下拉距离一定时出现动画,保持下拉直到距离足够大时触发函数加载直播间列表,而且在足够大距离时会有振动反馈,增强用户体验 2.下拉小距离出现动画,此时释放不会 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...
this.$router.push如何刷新页面_小程序丨微信小程序如何实现页面下拉刷新
微信小程序蕴含着众多功能,本期将简单介绍实现页面下拉刷新的方法,通过阅读本文,读者们可以自行动手操作,在实践中认识微信小程序. 首先,我们需在json配置中写出以下配置: "enablePu ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序简单易用下拉框组件
由于公司项目需要,自己开发了一个微信小组件--Miche_mini_select下拉框本下拉框特点: 1.保证下拉框在最上层,不会被其他控件所遮挡 2.引用方便,直接引用组件即可,与页面耦合性低 3 ...
微信小程序（2）--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载
样式基于weui 首先需要配置页面的json文件,启用下拉刷新 {"enablePullDownRefresh": true } 在WXML里,通过列表渲染即可显示数据 <v ...
微信小程序中 Vant DropdownMenu 下拉菜单组件滑动穿透问题
首先开发者在wxml页面中定义如下代码: page-meta 必须是页面内的第一个节点 <page-meta page-style="{{ showDropdownMenu ? 'ov ...

微信小程序实现循环列表下拉功能（点击事件）

微信小程序实现循环列表下拉功能（点击事件）相关推荐

最新文章

热门文章