罗世杰:fix:成交案例页面样式调整,SearchShopListItem.vue支持显示成交案例
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<view class="root">
|
||||
<view class="mask"/>
|
||||
<view class="mask" @click="handleMask"/>
|
||||
<view class="list-container">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item,index) in list"
|
||||
:class="{isActive: activeIndex === index}"
|
||||
@click="handleActive(index)"
|
||||
>
|
||||
<view></view>
|
||||
<text class="list-text">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -22,11 +23,43 @@
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
activeIndex:-1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMask() {
|
||||
this.$emit('cancelDrop');
|
||||
},
|
||||
async handleActive(index) {
|
||||
this.activeIndex = index;
|
||||
// 设置一个定时器,等待200毫秒
|
||||
const delayPromise = this.delay(200);
|
||||
// 等待定时器完成
|
||||
await delayPromise;
|
||||
this.handleMask();
|
||||
},
|
||||
delay(ms) {
|
||||
return new Promise((resolve) => {
|
||||
// 设置一个定时器,并将定时器的ID存储在this.timerId中
|
||||
this.timerId = setTimeout(() => {
|
||||
resolve();
|
||||
// 清除定时器
|
||||
clearTimeout(this.timerId);
|
||||
}, ms);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.isActive{
|
||||
color: #CC3333;
|
||||
}
|
||||
.mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user