• 首頁 > 新品推薦

    如何刪除微信小程序（微信小程序左滑刪除代碼實現）

    安妮 ? 2022-04-12 ? 新品推薦 ? 閱讀 9

    代碼實現

    .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
    免責聲明：此資訊系轉載自合作媒體或互聯網其它網站，「寶貝屋禮物網」登載此文出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其描述，文章內容僅供參考。

    如何刪除微信小程序如何刪除微信小程序 如何刪除微信小程序的不需要的程序 如何刪除微信小程序里的最近使用 如何刪除微信小程序游戲 如何刪除微信小程序搜索功能 如何刪除微信小程序個人信息 如何刪除微信小程序的app 如何刪除微信小程序緩存 如何刪除微信小程序游戲記錄 如何刪除微信小程序建議使用
    贊 ( )
    打賞 微信掃一掃微信掃一掃
    上一篇：網上報名怎么報名小學（幼升小家長，小學網上報名明起開始） 下一篇：騰訊地圖街景（騰訊地圖2022最新版）

    相關推薦

    亚博ag