参考项目:国际择校小程序,组件:movableView, 提交版本:
效果:
使用了别人写的组件
计算高度代码:
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>
修复后: