uniapp实现分页效果
呃~丑陋了一点0.0一、代码二、效果图一、代码<template><view><view class="xg"><view :class="{'active':isActive==1}" @click="chenked(1)">One</view><view :class="{'active':isActive==2}" @clic
·
一、代码
<template>
<view>
<view class="xg">
<view :class="{'active':isActive==1}" @click="chenked(1)">One</view>
<view :class="{'active':isActive==2}" @click="chenked(2)">Two</view>
<view :class="{'active':isActive==3}" @click="chenked(3)">Three</view>
</view>
<view class="page">
<view class="One" v-if="isActive==1">
<text>分页一</text>
</view>
<view class="Two" v-if="isActive==2">
<text>分页二</text>
</view>
<view class="Three" v-if="isActive==3">
<text>分页三</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: 1
}
},
methods: {
chenked(type) {
this.isActive = type
}
}
}
</script>
<style>
.xg{
width: 100%;
height: 60rpx;
display: flex;
justify-content: space-between;
}
.xg>view{
text-align: center;
line-height: 60rpx;
display: inline-block;
width: 100rpx;
height: 60rpx;
background: #4CD964;
}
.active {
position: relative;
color: #F1F1F1;
border-bottom: 6px solid #007AFF;
}
.page>view{
text-align: center;
line-height: 600rpx;
font-size: 46rpx;
width: 100%;
height: 600rpx;
background: pink;
}
</style>
二、效果图
更多推荐
已为社区贡献4条内容
所有评论(0)