1. 首頁 > 新品推薦

    如何刪除微信小程序(微信小程序左滑刪除代碼實現)

    代碼實現

    .wxml代碼:

    bindtouchstart與bindtouchend不需要

    <view>
    	<view>
    		<movable-area>
    			<movable-view direction="horizontal" inertia="true" bindtouchstart="onBindtouchstartEvent" bindtouchend="onBindtouchendEvent" bindchange="onChangeEvent" x="{{x}}">
    			聊天內容
    			</movable-view>
    		</movable-area>
    		<view>刪除</view>
    	</view>
    </view>

    wxss代碼實現

    /
    * pages/function/function.wxss 
    .area {
    width: 100%;
    height: 400px;
    background: gray;
    overflow: hidden;
    }
    
    .view {
    width: 100px;
    height: 100px;
    background: green;
    }
    
    */
    
    .listview {
    width: 100%;
    height: 1000rpx;
    background: #ccc;
    padding: 0;
    }
    
    .itemview {
    width: 100%;
    height: 200rpx;
    background: pink;
    display: flex;
    }
    
    .itemview .movablearea {
    height: 200rpx;
    background: blue;
    }
    
    .itemview .movableview {
    height: 200rpx;
    background: rgb(104, 243, 139);
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    .itemview .deleteview {
    width: 200rpx;
    height: 200rpx;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    js代碼實現

    Page({
      /**
       * 生命周期函數--監聽頁面加載
       */
      onLoad: function (options) {
        var systemInfo = wx.getSystemInfoSync();
        var windowWidth = systemInfo.windowWidth;
        //console.log(systemInfo);
        this.setData({
          "windowWidth": windowWidth
        })
      },
      onChangeEvent: function (event){
        console.log(event)
        if(event.detail.x <= -50){
          this.setData({
            "x":-100
          })
        }else{
          this.setData({
            "x": 0
          })
        }
        console.log(this.data.x);
      }
    })

    案例效果展示

    如何刪除微信小程序(微信小程序左滑刪除代碼實現)



    原文標題:如何刪除微信小程序(微信小程序左滑刪除代碼實現),如若轉載,請注明出處:http://www.pj0283.com/hwgg/459257.html
    免責聲明:此資訊系轉載自合作媒體或互聯網其它網站,「寶貝屋禮物網」登載此文出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其描述,文章內容僅供參考。