微信小程序--左滑显示按钮demo
2017-12-15 12:06
357 查看
wxml结构(删除部分代码):
wxss相关代码(主要是定位,已标识主要代码):
js相关代码:
结果:
本文作者:for_tomorrow
原文地址:微信小程序左滑显示按钮demo-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
4000
<view class="chapter-item" wx:for="{{klgData}}" data-index="{{index}}" bind:touchstart="touchS" bind:touchmove="touchM" bind:touchend="touchE" wx:key="item.id"><!-- 主要代码 --> <view class="klg-content" style="{{item.contentStyle}}"><!-- 主要代码 --> <view class="left-side"> <image wx:if="{{item.image}}" mode="aspectFill" class="chapter-image" src="{{host+item.image}}" /> </view> <view class="right-side"> <text class="chapter-text chapter-name">{{item.title}}</text> <text class="chapter-text chapter-time">时长:{{item.duration}}</text> </view> </view> <view class="operates" style="{{item.btnStyle}}"><!-- 主要代码 --> <view class="klg-btn returnBtn" catchtap="removeKlg"> <image mode="aspectFill" data-id="{{item._id}}" data-klgid="{{item.klgid}}" class="btn-icon" src="../../images/video_icon_value.png" /> 撕书 </view> <view class="klg-btn shareBtn"><image data-id="{{item.id}}" mode="aspectFill" class="btn-icon" src="../../images/video_point_icon_share.png" />分享</view> </view> </view>
wxss相关代码(主要是定位,已标识主要代码):
.chapter-item{ overflow:hidden; border-bottom: 1px solid #eee; position: relative; height:80px; display: flex; } .left-side,.right-side{ float:left; display: inline-block;position:relative;height:58px; } .right-side{flex:1;} .left-side{width:105px;padding-right:10px;flex:0 0 105px} .chapter-name{flex:1;display:block;color:#2E3330;} .chapter-time{display:block;position:absolute;bottom:0;left:0;} .chapter-image{width:104px;height:58px;} .chapter-text{display: block;} .klg-content{position: absolute;left:12px;top:10px;}//主要代码 绝对定位 .operates{position: absolute;top:0;overflow:hidden;z-index: 99;right:-160px;}//主要代码 绝对定位 .klg-btn{color:#34BC67;width:80px;line-height: 60px; float: left;text-align: center;font-size: 16px;position: relative;padding-top:24px;} .btn-icon{width:28px;height:28px;text-align: center;position: absolute;top:14px;left:25px;}
js相关代码:
//这里delBtnWidth为160,存放在data里面 //手指刚放到屏幕触发 touchS:function(e){ console.log("touchS"+e); //判断是否只有一个触摸点 if(e.touches.length==1){ this.setData({ //记录触摸起始位置的X坐标 startX:e.touches[0].clientX }); } }, //触摸时触发,手指在屏幕上每移动一次,触发一次 touchM:function(e){ console.log("touchM:"+e); var that = this if(e.touches.length==1){ //记录触摸点位置的X坐标 var moveX = e.touches[0].clientX; //计算手指起始点的X坐标与当前触摸点的X坐标的差值 var disX = that.data.startX - moveX; //delBtnWidth 为右侧按钮区域的宽度 var delBtnWidth = that.data.delBtnWidth; var contentStyle = ""; var btnStyle=""; if(disX == 0 || disX < 0){//如果移动距离小于等于0,文本层位置不变 contentStyle = "left:12px"; btnStyle = "right:-160px"; }else if(disX > 0 ){//移动距离大于0,文本层left值等于手指移动距离 contentStyle = "left:-"+disX+"px"; btnStyle = "right:"+(-160+disX)+"px"; if(disX>=delBtnWidth){ //控制手指移动距离最大值为删除按钮的宽度 contentStyle = "left:-"+delBtnWidth+"px"; btnStyle = "right:0px"; } } //获取手指触摸的是哪一个item var index = e.currentTarget.dataset.index; var list = that.data.klgData; //将拼接好的样式设置到当前item中 list[index].contentStyle = contentStyle; list[index].btnStyle = btnStyle; //更新列表的状态 this.setData({ klgData:list }); } }, touchE:function(e){ console.log("touchE"+e); var that = this if(e.changedTouches.length==1){ //手指移动结束后触摸点位置的X坐标 var endX = e.changedTouches[0].clientX; //触摸开始与结束,手指移动的距离 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; //如果距离小于按钮的1/2,不显示按钮 var contentStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:12px"; var btnStyle = disX > delBtnWidth/2 ? "right:0px":"right:-160px"; //获取手指触摸的是哪一项 var index = e.currentTarget.dataset.index; var list = that.data.klgData; list[index].contentStyle = contentStyle; list[index].btnStyle = btnStyle; //更新列表的状态 that.setData({ klgData:list }); } }
结果:
本文作者:for_tomorrow
原文地址:微信小程序左滑显示按钮demo-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
4000
相关文章推荐
- 微信小程序 实现列表项滑动显示删除按钮的功能
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序列表项滑动显示删除按钮
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序中添加客服按钮contact-button功能
- 微信小程序 将按钮悬浮放置到页面底部
- 微信小程序demo汇总
- 微信小程序中tabBar不显示问题
- 1, 编写程序,当用户在文本框中输入内容之后,单机不同的按钮,能够把文半框中的内容粘贴到文本区中。“重置”按钮实现将文本框和文本区中的内容清空。界面上的文本区只能显示内容,不能让用户输入文本。运行结果
- 微信小程序demo:九猫大百货:商城类demo
- 微信小程序,图片居中显示,适配不同机型
- 微信小程序(七):仿找事吧APP附近三公里Demo
- 微信小程序学习用精品demo:跟单
- 微信小程序使用checkbox显示多项选择框功能【附源码下载】
- 微信小程序开发关于分享功能中怎么定义同一个页面中不同的按钮触发不同的分享内容,或者右上角的分享和页面中分享
- 微信小程序Demo组件大全(对话框、指示器、五星评分,画廊,影院座位……
- 微信小程序Demo--仿知乎
- 微信小程序组件 contact-button(客服会话按钮)详解及实例代码