小程序?qū)崿F(xiàn)側(cè)滑刪除功能
更新時間：2022年06月24日 17:06:33 作者：那些年的筆記
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)側(cè)滑刪除功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序?qū)崿F(xiàn)側(cè)滑刪除的具體代碼，供大家參考，具體內(nèi)容如下
1.頁面布局
<view class='dialogue-box'>
? ? ? <scroll-view scroll-y="true" style="height:{{winHeight-50}}px">
? ? ? ? <view class='top-list'>
? ? ? ? ? <view class='standard_text1'>#</view>
? ? ? ? ? <view class='standard_text2'>積分項目</view>
? ? ? ? ? <view class='standard_text3'>標準分</view>
? ? ? ? ? <view class='standard_text4' bindtap='AddIntegrationProject'>
? ? ? ? ? ? <view class='standard_btn'>+</view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? ? <view wx:if="{{lists.length>0}}">
? ? ? ? ? <view class='top-list'>
? ? ? ? ? ? <view wx:for="{{lists}}" wx:key="{{index}}" class='main_item'>
? ? ? ? ? ? ? <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{index}}' style="{{item.txtStyle}}" class="inner txt">
? ? ? ? ? ? ? ? <view class='standard_text1'>{{index+1}}</view>
? ? ? ? ? ? ? ? <view class='standard_text2'>{{item.itemName}}</view>
? ? ? ? ? ? ? ? <view class='standard_text3'>{{item.score}}分</view>
? ? ? ? ? ? ? ? <view class='standard_text4'>
? ? ? ? ? ? ? ? ? <image class='standard_icon' bindtap='editStanderClick' data-item='{{item}}' src='{{BaseURL}}uploadFile/groupImages/edit-h2.png'></image>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? <view data-index="{{index}}" bindtap='delectOrganizationTeamScoreStandard' data-id='{{item.ID}}' class="inner del">刪除</view>
? ? ? ? ? ? </view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? ? <view class='No-data' wx:else>
? ? ? ? ? <image src='{{BaseURL}}uploadFile/groupImages/No-data.png'></image>
? ? ? ? ? <view class='No-text'>親！暫無您的上月積分記錄！</view>
? ? ? ? </view>
? ? ? </scroll-view>
</view>2.樣式
/* 標準s */
?
.standard_text1 {
? height: 80rpx;
? line-height: 80rpx;
? float: left;
? width: 60rpx;
? font-size: 28rpx;
? color: #3b3c42;
? padding-left: 30rpx;
}
?
.standard_text2 {
? line-height: 80rpx;
? float: left;
? width: 380rpx;
? font-size: 28rpx;
? color: #3b3c42;
}
?
.standard_text3 {
? height: 80rpx;
? line-height: 80rpx;
? float: left;
? width: 130rpx;
? font-size: 28rpx;
? color: #3b3c42;
}
?
.standard_text4 {
? height: 80rpx;
? line-height: 80rpx;
? float: left;
? width: 140rpx;
? font-size: 28rpx;
? color: #3b3c42;
}
?
.standard_btn {
? height: 50rpx;
? line-height: 50rpx;
? float: left;
? border: 1px solid #3891f8;
? color: #3891f8;
? width: 50rpx;
? text-align: center;
? font-size: 36rpx;
? border-radius: 60px;
? margin-top: 10rpx;
? ?margin-left: 60rpx;
}
?
.standard_icon {
? height: 60rpx;
? width: 60rpx;
? margin-top: 8rpx;
? float: left;
? margin-left: 55rpx;
}
?
/* 側(cè)滑刪除s */
.main_item {
? float: left;
? width: 100%;
? background-color: #fff;
? position: relative;
? overflow: hidden;
? height: 40px;
? line-height: 40px;
}
.inner {
? position: absolute;
? top: 0;
? width: 100%;
? line-height: 80rpx;
? height: 80rpx;
? float: left;
}
?
.inner.txt {
? background-color: #fff;
? width: 100%;
? z-index: 5;
? transition: left 0.2s ease-in-out;
? white-space: nowrap;
? overflow: hidden;
? text-overflow: ellipsis;
}
?
.inner.del {
? background-color: #e64340;
? width: 150rpx;
? text-align: center;
? z-index: 4;
? right: 0;
? color: #fff;
}
?
/* 側(cè)滑刪除e */3.js
var app = getApp();
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? currentTab: 0,
? ? BaseURL: app.globalData.BaseURL, //圖片后臺
? ? mDate: '',
?
? ? delBtnWidth: 180 //刪除按鈕寬度單位（rpx）
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
? ? var that = this;
? ? that.getOrganizationTeamScore(); //獲取標準積分
? ? // 獲取系統(tǒng)寬高信息?
? ? wx.getSystemInfo({
? ? ? success: function(res) {
? ? ? ? that.setData({
? ? ? ? ? winWidth: res.windowWidth,
? ? ? ? ? winHeight: res.windowHeight
? ? ? ? });
? ? ? }
? ? });
? ? that.initEleWidth(); //側(cè)滑刪除S
? },
?
? /*****************側(cè)滑刪除S*******************/
? touchS: function(e) {
? ? if (e.touches.length == 1) {
? ? ? this.setData({
? ? ? ? //設(shè)置觸摸起始點水平方向位置
? ? ? ? startX: e.touches[0].clientX
? ? ? });
? ? }
? },
? touchM: function(e) {
? ? if (e.touches.length == 1) {
? ? ? //手指移動時水平方向位置
? ? ? var moveX = e.touches[0].clientX;
? ? ? //手指起始點位置與移動期間的差值
? ? ? var disX = this.data.startX - moveX;
? ? ? var delBtnWidth = this.data.delBtnWidth;
? ? ? var txtStyle = "";
? ? ? if (disX == 0 || disX < 0) { //如果移動距離小于等于0，文本層位置不變
? ? ? ? txtStyle = "left:0px";
? ? ? } else if (disX > 0) { //移動距離大于0，文本層left值等于手指移動距離
? ? ? ? txtStyle = "left:-" + disX + "px";
? ? ? ? if (disX >= delBtnWidth) {
? ? ? ? ? //控制手指移動距離最大值為刪除按鈕的寬度
? ? ? ? ? txtStyle = "left:-" + delBtnWidth + "px";
? ? ? ? }
? ? ? }
? ? ? //獲取手指觸摸的是哪一項
? ? ? var index = e.currentTarget.dataset.index
? ? ? // var index = e.target.dataset.index;
? ? ? var lists = this.data.lists;
? ? ? lists[index].txtStyle = txtStyle;
? ? ? //更新列表的狀態(tài)
? ? ? this.setData({
? ? ? ? lists: lists
? ? ? });
? ? }
? },
?
? touchE: function(e) {
? ? if (e.changedTouches.length == 1) {
? ? ? //手指移動結(jié)束后水平位置
? ? ? var endX = e.changedTouches[0].clientX;
? ? ? //觸摸開始與結(jié)束，手指移動的距離
? ? ? var disX = this.data.startX - endX;
? ? ? var delBtnWidth = this.data.delBtnWidth;
? ? ? //如果距離小于刪除按鈕的1/2，不顯示刪除按鈕
? ? ? var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
? ? ? //獲取手指觸摸的是哪一項
? ? ? var index = e.currentTarget.dataset.index
? ? ? // var index = e.target.dataset.index;
? ? ? var lists = this.data.lists;
? ? ? lists[index].txtStyle = txtStyle;
? ? ? //更新列表的狀態(tài)
? ? ? this.setData({
? ? ? ? lists: lists
? ? ? });
? ? }
? },
?
? //獲取元素自適應(yīng)后的實際寬度
? getEleWidth: function(w) {
? ? var real = 0;
? ? try {
? ? ? var res = wx.getSystemInfoSync().windowWidth;
? ? ? var scale = (750 / 2) / (w / 2); //以寬度750px設(shè)計稿做寬度的自適應(yīng)
? ? ? // console.log(scale);
? ? ? real = Math.floor(res / scale);
? ? ? return real;
? ? } catch (e) {
? ? ? return false;
? ? ? // Do something when catch error
? ? }
? },
?
? initEleWidth: function() {
? ? var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
? ? this.setData({
? ? ? delBtnWidth: delBtnWidth
? ? });
? },
?
? //點擊刪除按鈕事件
? delItem: function(e) {
? ? //獲取列表中要刪除項的下標
? ? var index = e.currentTarget.dataset.index
? ? // var index = e.target.dataset.index;
? ? var lists = this.data.lists;
? ? //移除列表中下標為index的項
? ? lists.splice(index, 1);
? ? //更新列表的狀態(tài)
? ? this.setData({
? ? ? lists: lists
? ? });
? },
? /*****************側(cè)滑刪除e*******************/
?
? /************************標準制定s***************/
? /**獲取積分標準 */
? getOrganizationTeamScore: function() {
? ? var that = this;
? ? wx.request({
? ? ? header: {
? ? ? ? "Content-Type": "application/x-www-form-urlencoded"
? ? ? },
? ? ? method: 'POST',
? ? ? url: app.globalData.BaseURL + 'group/v1/getOrganizationTeamScore.html',
? ? ? data: {
? ? ? ? organizationTeamID: that.data.organizationTeamID,
? ? ? },
? ? ? success: function(res) {
? ? ? ? wx.hideLoading();
? ? ? ? console.log("獲取積分標準", res.data)
? ? ? ? var status = res.data.status;
? ? ? ? var info = res.data.info
? ? ? ? if (status.indexOf("SUCCESS") == 0) {
? ? ? ? ? that.setData({
? ? ? ? ? ? lists: info
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? wx.showToast({
? ? ? ? ? ? title: '獲取失敗',
? ? ? ? ? ? icon: 'none'
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
? },
?
? /**刪除標準 */
? delectOrganizationTeamScoreStandard: function(e) {
? ? var organizationTeamScoreStandardID = e.currentTarget.dataset.id;
? ? var that = this;
? ? wx.showModal({
? ? ? title: '刪除此條標準記錄',
? ? ? content: '是否刪除？',
? ? ? success: function(res) {
? ? ? ? if (res.confirm) {
? ? ? ? ? console.log('用戶點擊確定')
? ? ? ? ? wx.request({
? ? ? ? ? ? header: {
? ? ? ? ? ? ? "Content-Type": "application/x-www-form-urlencoded"
? ? ? ? ? ? },
? ? ? ? ? ? method: 'POST',
? ? ? ? ? ? url: app.globalData.BaseURL + 'group/v1/delectOrganizationTeamScoreStandard.do',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? organizationTeamScoreStandardID: organizationTeamScoreStandardID,
? ? ? ? ? ? },
? ? ? ? ? ? success: function(res) {
? ? ? ? ? ? ? var status = res.data.status;
? ? ? ? ? ? ? var info = res.data.info
? ? ? ? ? ? ? if (status.indexOf("SUCCESS") == 0) {
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? title: '操作成功',
? ? ? ? ? ? ? ? ? icon: 'none'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? that.getOrganizationTeamScore();
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? title: '數(shù)據(jù)使用中，無法刪除！',
? ? ? ? ? ? ? ? ? icon: 'none'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? } else if (res.cancel) {
? ? ? ? ? console.log('用戶點擊取消')
? ? ? ? }
? ? ? }
? ? })
? },
?
? /**修改標準 */
? editStanderClick: function(e) {
? ? var item = e.currentTarget.dataset.item;
? ? wx.navigateTo({
? ? ? url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID +
? ? ? ? '&organizationTeamScoreStandardID=' + item.ID +
? ? ? ? '&scoreStanderFixID=' + item.scoreStanderFixID +
? ? ? ? '&itemName=' + item.itemName +
? ? ? ? '&score=' + item.score +
? ? ? ? '&unit=' + item.unit +
? ? ? ? '&isEdit=1',
? ? })
? },
?
? // 添加積分項目
? AddIntegrationProject: function() {
? ? wx.navigateTo({
? ? ? url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID,
? ? ? success: function(res) {},
? ? ? fail: function(res) {},
? ? ? complete: function(res) {},
? ? })
? },
? /************************標準制定e***************/
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {
? ? var that = this;
? ? that.getOrganizationTeamScore(); //標準制定
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {
?
? },
?
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function() {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {
?
? },
?
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function() {
?
? }
})4.效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇layer.js open 隱藏滾動條的例子，具有很好的參考價值，希望對大家有所幫助。 一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)搜索框功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了JS實現(xiàn)間歇滾動的運動效果,涉及javascript定時器觸發(fā)動態(tài)改變頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS實現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素與相關(guān)屬性的實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
這篇文章給大家分享一個小的JavaScript的案例，就是模仿微博輸入框的效果，非常不錯，對微博輸入框效果感興趣的朋友通過本文學(xué)習(xí)吧2016-12-12
這篇文章主要介紹了uniApp實現(xiàn)選擇時間功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家詳細介紹了JavaScript中一些reduce和map的優(yōu)雅寫法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
今天小編就為大家分享一篇解決layer圖標icon不加載的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
addRule在firefox下的兼容寫法...2006-11-11
這篇文章主要介紹了Javascript中的apply()方法淺析,本文講解了apply vs call、Javascript apply 方法等內(nèi)容,需要的朋友可以參考下2015-03-03