//渲染页面
<view class="doorBox">
<view class="inv-h-w">
<!-- 档案池 -->
<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">档案池</view>
<!-- 中间竖线 -->
<view style="height: 32upx;background-color: #d6d6d6;width: 2upx;"></view>
<!-- 已选档案 -->
<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="yiXuan">已选档案</view>
</view>
<view class="" v-show="Inv == 0">档案池</view>
<view class="" v-show="Inv == 1">已选档案</view>
</view>
//数据区
export default {
data() {
return {
Inv: 0,
}
},
methods: {
yiXuan() {
/* 滑动门默认值 */
this.Inv = 1;
}
}
}
//样式区
/* 滑动门 */
.doorBox {
width: 710upx;
min-height: 800upx;
margin: 20upx auto;
font-size: 30upx;
}
.inv-h-w {
height: 100upx;
display: flex;
margin-bottom: 40upx;
align-items: center;
}
.inv-h {
width: 350upx;
text-align: center;
color: #000;
height: 100upx;
line-height: 100upx;
border-bottom: 2upx solid #e1e1e1;
}
.inv-h-se {
color: #25b7b4;
border-bottom: 2upx solid #25b7b4;
}
uni-app数据驱动滑动门
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.