小程序滑动删除

参考项目：国际择校小程序，组件：movableView， 提交版本：

收藏整理
Date:
August 7, 2023 at 10:06:28 GMT+8

效果：

使用了别人写的组件 , cell动态高度需要计算，这块稍微麻烦一点
计算高度代码：

properties: {

		item: {
			type: Object,
			value: {},
			observer: function (val) {
				console.log('---??', val,'type?', this.properties.typeId)

				switch (this.properties.typeId) { // 在属性里判断类型
					case 'school': 
						this.getSchoolCellHeight()
						break;
					default:
						this.getCellHeightArr()
						break;
				}
			}
		},
        typeId: {
			type: String,
			value: ''
		},
}

用选择器获取高度，设置高度：

	getCellHeightArr() {
			const query = wx.createSelectorQuery().in(this)
			query.select('.easyCell').boundingClientRect()
			query.exec((res) => {
				console.log('收藏cell位置', res)
				this.setData({
					boxHeight: res[0].height
				})
			})
		},

		getSchoolCellHeight() {
			const query = wx.createSelectorQuery().in(this)
			query.select('.scBox').boundingClientRect()
			query.exec((res) => {
				console.log('school位置', res)
				this.setData({
					boxHeight: res[0].height
				})
			})
		},

点击顶部的section，删除的红色按钮会闪烁，加了一个property,修复这个bug:

        clickSection:{
			type:Boolean,
			value:false,
			observer:function(){
				setTimeout(() => {
					
					this.setData({
						clickSection:false
					})
				}, 500);
			}
		}

在wxml里面判断删除按钮显示隐藏：

<view class="operations-content" wx:if="{{!clickSection}}">
		<!-- height: {{boxHeight-2}}px;  -->

		<view class="operation-button" catchtap="handleDelete" style="height: {{boxHeight-2}}px; line-height: {{boxHeight-2}}px;">
			删除
		</view>

		<!-- <view wx:elif="{{typeId == '5'}}" class="operation-button" catchtap="handleDelete" style="height: 200rpx; line-height: 200rpx;">
			删除
		</view>

		<view wx:else class="operation-button" catchtap="handleDelete" style="height: {{boxHeight}}px; line-height: {{boxHeight}}px;">
			删除
		</view> -->
	</view>

修复后：