最初打算使用scroll-view实现,效果好、流畅、有惯性滑动,但由于滚动条没法去掉、无法实现上下层的帧
布局,最终放弃了。 还是自己写个吧,利用手势事件。遗憾
的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动搏物是不可能了。 item的布局: 推荐小程序优先使用flex布局,完全够用。这也是微信推荐的。 <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image> <view class="number-wrapper">搭升<text class="name">{{cardTeam.name}}</text> <view class="count-wrapper"><view class="decrease-btn">-</view>基枝液 <text class="count">1</text><view class="increase-btn">+</view> </view> <view class="price-wrapper"><text class="unit">¥</text><text class="price">99.80</text> </view> </view> <view class="ok"><view class="inner-ok">确定</view></view> <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>删除</view></view> </view> 主要是将删除按钮的设为绝对定位(position: absolute): .item .remove{ width: 60pxheight: 100%background-color: redposition: absolutetop: 0right: -60pxdisplay: flexjustify-content: centeralign-items: center } Page({data: { cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}]},drawStart : function(e){ // console.log("drawStart")var touch = e.touches[0]startX = touch.clientXstartY = touch.clientYvar cardTeams = this.data.cardTeamsfor(var i in cardTeams){ var data = cardTeams[i] data.startRight = data.right} key = true },drawEnd : function(e){ console.log("drawEnd")var cardTeams = this.data.cardTeamsfor(var i in cardTeams){ var data = cardTeams[i] if(data.right <= 100/2){ data.right = 0 }else{ data.right = maxRight } } this.setData({ cardTeams:cardTeams }) },drawMove : function(e){ //console.log("drawMove")var self = thisvar dataId = e.currentTarget.idvar cardTeams = this.data.cardTeamsif(key){ var touch = e.touches[0] endX = touch.clientX endY = touch.clientY console.log("startX="+startX+" endX="+endX ) if(endX - startX == 0) return var res = cardTeams//从右往左if((endX - startX) <0){ for(var k in res){ var data = res[k]if(res[k].id == dataId){ var startRight = res[k].startRight var change = startX - endX startRight += change if(startRight >maxRight) startRight = maxRight res[k].right = startRight} } }else{//从左往右 for(var k in res){ var data = res[k]if(res[k].id == dataId){ var startRight = res[k].startRight var change = endX - startX startRight -= change if(startRight <0) startRight = 0 res[k].right = startRight } } } self.setData({ cardTeams:cardTeams }) }},//删除itemdelItem: function(e){ var dataId = e.target.dataset.idconsole.log("删除"+dataId)var cardTeams = this.data.cardTeamsvar newCardTeams = [] for(var i in cardTeams){ var item = cardTeams[i] if(item.id != dataId){newCardTeams.push(item) } } this.setData({ cardTeams:newCardTeams }) },onLoad: function () { console.log('onLoad:'+app.globalData.domain) } }) drawStart用于记录手指触碰时的位置,drawMove记录手指滑动的位置,两者的差值就是删除按钮的偏移量 drawEnd手指抬起时触发,用于设置d回、摊开效果。目前我的是超过一半自动d开,不足一半自动收回。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。应该是AIR
版本哪拿问题,你应用程序的版本李桥搭跟你系统安装好的AIR版本不对(系统中的版本过低吧)如果没错的话,你flexSDK已经升级到3.2了,那对应的air就是1.5的版本,而你系统中装了1.0版本,所以才会报错(卸裁AIR,安装air1.5)
那如果你flexSDK还是3.0,那自动生成应用程序的AIR版本就是1.0,而你系统中安装的是1.5的版本.所以安装出错了!(升级SDK,重新建一个应用程序,测试一消链下)
评论列表(0条)