微信小程序左滑顯示按鈕demo - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序左滑顯示按鈕demo

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:55

wxml結構(删除部分代碼):

<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="https://www.wxapp-union.com/{{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="https://www.wxapp-union.com/images/video_icon_value.png" />
            撕書
        </view>
        <view class="klg-btn shareBtn"><image  data-id="{{item.id}}" mode="aspectFill" class="btn-icon" src="https://www.wxapp-union.com/images/video_point_icon_share.png" />分享</view>
    </view>
</view>


wxss相關(guān)代碼(主要是定位,已标識主要代碼):

.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相關(guān)代碼:

//這裡delBtnWidth為160,存放在data裡面
//手指剛放到屏幕觸發
        touchS:function(e){
            console.log("touchS"+e);
           //判斷是否隻有一個(gè)觸摸點
            if(e.touches.length==1){
                  this.setData({
                    //記錄觸摸起始位置的X坐(zuò)标
                    startX:e.touches[0].clientX
                  });
            }
        },
         //觸摸時觸發,手指在屏幕上每移動(dòng)一次,觸發一次
        touchM:function(e){
            console.log("touchM:"+e);
            var that = this
            if(e.touches.length==1){
                 //記錄觸摸點位置的X坐(zuò)标
                  var moveX = e.touches[0].clientX;
                  //計算手指起始點的X坐(zuò)标與當前觸摸點的X坐(zuò)标的差值
                  var disX = that.data.startX - moveX;
                 //delBtnWidth 為右側按鈕區域的寬度
                  var delBtnWidth = that.data.delBtnWidth;
                  var contentStyle = "";
                  var btnStyle="";
                  if(disX == 0 || disX < 0){//如(rú)果移動(dòng)距離(lí)小于等于0,文(wén)本層位置不變
                    contentStyle = "left:12px";
                    btnStyle = "right:-160px";
                  }else if(disX > 0 ){//移動(dòng)距離(lí)大于0,文(wén)本層left值等于手指移動(dòng)距離(lí)
                    contentStyle = "left:-"+disX+"px";
                    btnStyle = "right:"+(-160+disX)+"px";
                    if(disX>=delBtnWidth){
                          //控制手指移動(dòng)距離(lí)最大值為删除按鈕的寬度
                          contentStyle = "left:-"+delBtnWidth+"px";
                          btnStyle = "right:0px";
                    }
                  }
                  //獲取手指觸摸的是哪一個(gè)item
                  var index = e.currentTarget.dataset.index;
                  var list = that.data.klgData;
                  //将拼接好的樣式設置到當前item中(zhōng)
                  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){
              //手指移動(dòng)結束後觸摸點位置的X坐(zuò)标
                  var endX = e.changedTouches[0].clientX;
                  //觸摸開始與結束,手指移動(dòng)的距離(lí)
                  var disX = that.data.startX - endX;
                  var delBtnWidth = that.data.delBtnWidth;
                  //如(rú)果距離(lí)小于按鈕的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
                  });
            }
        }

結果:


相關(guān)案例查看更多