小程序?qū)崿F(xiàn)側(cè)滑刪除功能
更新時(shí)間:2022年06月24日 17:06:33 作者:那些年的筆記
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)側(cè)滑刪除功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)側(cè)滑刪除的具體代碼,供大家參考,具體內(nèi)容如下
1.頁(yè)面布局
<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'>積分項(xiàng)目</view> ? ? ? ? ? <view class='standard_text3'>標(biāo)準(zhǔn)分</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'>親!暫無(wú)您的上月積分記錄!</view> ? ? ? ? </view> ? ? ? </scroll-view> </view>
2.樣式
/* 標(biāo)準(zhǔn)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({ ? ? /** ? ?* 頁(yè)面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? currentTab: 0, ? ? BaseURL: app.globalData.BaseURL, //圖片后臺(tái) ? ? mDate: '', ? ? ? delBtnWidth: 180 //刪除按鈕寬度單位(rpx) ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 ? ?*/ ? onLoad: function(options) { ? ? var that = this; ? ? that.getOrganizationTeamScore(); //獲取標(biāo)準(zhǔn)積分 ? ? // 獲取系統(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è)置觸摸起始點(diǎn)水平方向位置 ? ? ? ? startX: e.touches[0].clientX ? ? ? }); ? ? } ? }, ? touchM: function(e) { ? ? if (e.touches.length == 1) { ? ? ? //手指移動(dòng)時(shí)水平方向位置 ? ? ? var moveX = e.touches[0].clientX; ? ? ? //手指起始點(diǎn)位置與移動(dòng)期間的差值 ? ? ? var disX = this.data.startX - moveX; ? ? ? var delBtnWidth = this.data.delBtnWidth; ? ? ? var txtStyle = ""; ? ? ? if (disX == 0 || disX < 0) { //如果移動(dòng)距離小于等于0,文本層位置不變 ? ? ? ? txtStyle = "left:0px"; ? ? ? } else if (disX > 0) { //移動(dòng)距離大于0,文本層left值等于手指移動(dòng)距離 ? ? ? ? txtStyle = "left:-" + disX + "px"; ? ? ? ? if (disX >= delBtnWidth) { ? ? ? ? ? //控制手指移動(dòng)距離最大值為刪除按鈕的寬度 ? ? ? ? ? txtStyle = "left:-" + delBtnWidth + "px"; ? ? ? ? } ? ? ? } ? ? ? //獲取手指觸摸的是哪一項(xiàng) ? ? ? 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) { ? ? ? //手指移動(dòng)結(jié)束后水平位置 ? ? ? var endX = e.changedTouches[0].clientX; ? ? ? //觸摸開始與結(jié)束,手指移動(dòng)的距離 ? ? ? var disX = this.data.startX - endX; ? ? ? var delBtnWidth = this.data.delBtnWidth; ? ? ? //如果距離小于刪除按鈕的1/2,不顯示刪除按鈕 ? ? ? var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px"; ? ? ? //獲取手指觸摸的是哪一項(xiàng) ? ? ? 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)后的實(shí)際寬度 ? getEleWidth: function(w) { ? ? var real = 0; ? ? try { ? ? ? var res = wx.getSystemInfoSync().windowWidth; ? ? ? var scale = (750 / 2) / (w / 2); //以寬度750px設(shè)計(jì)稿做寬度的自適應(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 ? ? }); ? }, ? ? //點(diǎn)擊刪除按鈕事件 ? delItem: function(e) { ? ? //獲取列表中要?jiǎng)h除項(xiàng)的下標(biāo) ? ? var index = e.currentTarget.dataset.index ? ? // var index = e.target.dataset.index; ? ? var lists = this.data.lists; ? ? //移除列表中下標(biāo)為index的項(xiàng) ? ? lists.splice(index, 1); ? ? //更新列表的狀態(tài) ? ? this.setData({ ? ? ? lists: lists ? ? }); ? }, ? /*****************側(cè)滑刪除e*******************/ ? ? /************************標(biāo)準(zhǔn)制定s***************/ ? /**獲取積分標(biāo)準(zhǔn) */ ? 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("獲取積分標(biāo)準(zhǔn)", 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' ? ? ? ? ? }) ? ? ? ? } ? ? ? } ? ? }) ? }, ? ? /**刪除標(biāo)準(zhǔn) */ ? delectOrganizationTeamScoreStandard: function(e) { ? ? var organizationTeamScoreStandardID = e.currentTarget.dataset.id; ? ? var that = this; ? ? wx.showModal({ ? ? ? title: '刪除此條標(biāo)準(zhǔn)記錄', ? ? ? content: '是否刪除?', ? ? ? success: function(res) { ? ? ? ? if (res.confirm) { ? ? ? ? ? console.log('用戶點(diǎn)擊確定') ? ? ? ? ? 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ù)使用中,無(wú)法刪除!', ? ? ? ? ? ? ? ? ? icon: 'none' ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? }) ? ? ? ? } else if (res.cancel) { ? ? ? ? ? console.log('用戶點(diǎn)擊取消') ? ? ? ? } ? ? ? } ? ? }) ? }, ? ? /**修改標(biāo)準(zhǔn) */ ? 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', ? ? }) ? }, ? ? // 添加積分項(xiàng)目 ? 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) {}, ? ? }) ? }, ? /************************標(biāo)準(zhǔn)制定e***************/ ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 ? ?*/ ? onReady: function() { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 ? ?*/ ? onShow: function() { ? ? var that = this; ? ? that.getOrganizationTeamScore(); //標(biāo)準(zhǔn)制定 ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 ? ?*/ ? onHide: function() { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 ? ?*/ ? onUnload: function() { ? ? }, ? ? /** ? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 ? ?*/ ? onPullDownRefresh: function() { ? ? }, ? ? /** ? ?* 頁(yè)面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function() { ? ? }, ? ? /** ? ?* 用戶點(diǎn)擊右上角分享 ? ?*/ ? onShareAppMessage: function() { ? ? } })
4.效果圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)間歇滾動(dòng)的運(yùn)動(dòng)效果,涉及javascript定時(shí)器觸發(fā)動(dòng)態(tài)改變頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素與相關(guān)屬性的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12uniApp實(shí)現(xiàn)選擇時(shí)間功能
這篇文章主要介紹了uniApp實(shí)現(xiàn)選擇時(shí)間功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03解決layer圖標(biāo)icon不加載的問(wèn)題
今天小編就為大家分享一篇解決layer圖標(biāo)icon不加載的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09