前言
我们在开发的过程中经常会遇到现有插件无法满足需求的情况,毕竟不是组件库不能满足项目所有需求,这时就需要我们自己去构建组件。
写这篇博文也是记录我平时开发的,以后可能会用得到的东西。希望大家看到本博文也能得到一些启发,我也就功德无量了。
正文
话不多说直接上代码
Dom
<view :style="{position: isShow?'fixed':''}">
<view class="anyiPicker" :animation="animationData">
<view class="anyiPicker_btn">
<text @click.stop="close">取消</text>
<text @click.stop="confirmFun">确定</text>
</view>
<view class="anyiPicker_content">
<block v-for="(al,ald) in addressList" :key="ald">
<text id="confirmText" :data-address="al">{{ al.name }}</text>
</block>
</view>
</view>
<view class="cover" v-if="isShow" @click.stop="close"></view>
</view>
JS
data(){
return{
animationData: {},
systemInfo: uni.getSystemInfoSync(),
isShow: false,
addressList:[
{name: "零阳镇"},
{name: "待发送镇"},
{name: "收到镇"},
{name: "娃儿镇"},
{name: "查询镇"},
{name: "和聚汇镇"},
{name: "热镇"},
{name: "问问镇"},
{name: "不能镇"},
{name: "以oui镇"},
{name: "毒贩夫妇镇"},
{name: "冲冲冲镇"},
{name: "问问多少镇"},
],
}
}
/**
* 方法
* */
onShow() {
let animation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation = animation;
},
open(){
this.isShow = true
this.animation.translateY(-1090/750 * this.systemInfo.windowWidth).step();
this.animationData = this.animation.export();
},
close(){
this.isShow = false
this.animation.translateY(1090/750 * this.systemInfo.windowWidth).step();
this.animationData = this.animation.export();
},
confirmFun(e){
const query = uni.createSelectorQuery().in(this)
query.select("#confirmText").boundingClientRect(item=>{
console.log("11111111111", item.dataset.address)
}).exec()
this.close()
},
scss
.cover{
height: 100vh;
width: 100vw;
position: absolute;
z-index: 999;
background: rgba(0,0,0,.5);
}
.anyiPicker{
position: fixed;
background-color: $white;
z-index: 9999;
max-height: 1100rpx;
bottom: -1100rpx;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
&_btn{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30rpx;
font-size: 36rpx;
border-bottom: 1rpx solid $lineColor;
text:first-child{
color: $fontGrey;
}
text:last-child{
color: $green;
}
}
&_content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 30rpx;
height: 400rpx;
overflow: scroll;
color: $fontGrey;
}
}
结语
代码如上,如果您是新手估计理解有些困难。
可如果是老鸟 ‘(ˉ▽ ̄~) 切~~!就这~’。
欢迎留言交流!!!