<template>
<view class="isflex">
<view :style="{'height':x}"></view>
<view class="pd16_32">
<view class="flex_1">
<view v-for="(item,index) in center_list" :key="index">
<view class="scroll_box" @click="active1(index)">
<text class="font_18" v-if="activeIndex==index">{{item}}</text>
<text class="font_16" v-else>{{item}}</text>
<view class="chuantou" v-if="activeIndex==index"></view>
</view>
</view>
</view>
</view>
<swiper :current="activeIndex" @change="newSwiper" class="swiper">
<swiper-item v-for="(item,index) in center_list" :key="index" class="swiper_item">
<template v-if="index!=0">
<view class="pd16_32">
<view class="flex_2">
<view v-for="(item,index) in center_list2" :key="index">
<view class="scroll_box" @click="active2(index)">
<text class="font_16" :class="{'color_purple':activeIndex2==index}">{{item}}</text>
</view>
</view>
</view>
</view>
<swiper class="swiper" :current="activeIndex2" @change="newSwiper2">
<swiper-item v-for="(item,index) in center_list2" :key="index" class="swiper_item">
<list class="list" show-scrollbar="false">
<cell v-for="(item,index) in newList" :key="item.id">
<template v-if="newList.length>0">
<view class="pd32" :class="{'border_bottom':index!=newList.lenght-1}">
<view class="flex_row flex_between">
<view class="flex_row">
<image :src="item.headerImg" mode="" style=""
class="newList_headImg" />
<view class="flex_between newList_person">
<text class="newList_text1">{{item.UserName}}</text>
<view class="flex_row">
<view class="newList_box1">
<text class="newList_text2">{{item.age}}</text>
</view>
<view class="newList_box2">
<text class="newList_text2">{{item.voice_duration}}</text>
</view>
<view class="newList_box3"
v-if="item.isfriend &&activeIndex2==1">
<text class="newList_text3">好友</text>
</view>
</view>
</view>
</view>
<view class="flex_alitem flex_jusCenter" v-if="activeIndex3==1">
<image src="/static/predestination_Img/chat2_icon.png"
class="newList_rightImg" />
<text class="newList_text4">{{item.heat}}</text>
</view>
</view>
</view>
</template>
<template v-else>
<view class="phpto_box">
<image src="/static/news_Img/Noclose_icon.png" mode="" class="img_size" />
<text class="phpto_text">你还没有亲密的人哦~</text>
</view>
<view class="flex_alitem flex_jusCenter">
<view class="Btn_container">
<text class="Btn_text">去聊聊</text>
</view>
</view>
</template>
</cell>
</list>
</swiper-item>
</swiper>
</template>
<template v-else>
<view class="phpto_box">
<image src="/static/news_Img/Noclose_icon.png" mode="" class="img_size" />
<text class="phpto_text">你还没有收到过消息哦~</text>
</view>
<view class="flex_alitem flex_jusCenter">
<view class="Btn_container">
<text class="Btn_text">去聊聊</text>
</view>
</view>
</template>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
x: uni.getSystemInfoSync().statusBarHeight, //通讯栏高度
center_list: ['消息', '好友'],
center_list2: ['亲密', '好友', '关注', '粉丝'],
newList: [{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '文质彬彬的圆鼓鼓',
age: 26, //年龄
voice_duration: '11s', //语音时长
isfriend: false, //是朋友吗 true
heat: 33.7,
id: '001'
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '弄假成真的催逝员',
age: 29, //年龄
voice_duration: '8s', //语音时长
isfriend: true, //是朋友吗 true
heat: 30.6,
id: '002',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '好学不内卷的卷心超人',
age: 23, //年龄
voice_duration: '16s', //语音时长
isfriend: true, //是朋友吗 true
heat: 33.3,
id: '003',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '喜欢吃芒果的榴莲',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: false, //是朋友吗 true
heat: 32.7,
id: '004',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '玻璃心刀子嘴',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '005',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '小明隔壁的小刚',
age: 12, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '006',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '仙界漏网之鱼',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '007',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '战场达人普洛斯',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '008',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '北欧神话椰子树',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '009',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '新西兰大白菜',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '010',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '乔治和他的猫',
age: 22, //年龄
voice_duration: '12s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '010',
},
{
headerImg: '/static/predestination_Img/voice_bg.png',
UserName: '欧洲黑道教父',
age: 18, //年龄
voice_duration: '7s', //语音时长
isfriend: true, //是朋友吗 true
heat: 32.7,
id: '011',
}
],
activeIndex: 0, //消息与好友的下标
activeIndex2: 0, //好友--亲密、好友、关注、粉丝 下标
}
},
onPullDownRefresh() {
console.log('触发下拉刷新了')
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000);
},
methods: {
// 最外层滑屏（消息、好友）
curChange(e) {
console.log('滑屏', e)
let val = e.detail.current
this.activeIndex=val
},
// 内层滑屏 (亲密、好友、关注、粉丝)
curChange2(e) {
console.log('里面的齿轮滑动', e)
let val = e.detail.current
this.activeIndex2 = val
},
// 外层点击(消息、好友)
active1(val) {
console.log('val'.val)
this.activeIndex = val
},
// 内层点击(亲密、好友、关注、粉丝)
active2(val) {
console.log('亲密', val)
this.activeIndex2 = val
},
// 外层 不借助获取高度，来实现滑屏
newSwiper(e) {
this.activeIndex = e.detail.current
console.log('eeeee', e)
},
// 内层 不借助获取高度，来实现滑屏
newSwiper2(e) {
this.activeIndex2 = e.detail.current
console.log('eeeee2222', e)
},
},
mounted() {
},
}
</script>
<style>
.flex_row {
flex-direction: row;
}
.flex_between {
justify-content: space-between;
}
.flex_jusCenter {
justify-content: center;
}
.flex_alitem {
align-items: center;
}
.isflex {
flex: 1;
}
.pd32 {
padding: 32rpx;
}
.pd16_32 {
padding: 16rpx 32rpx;
}
.font_18 {
margin-left: 6rpx;
font-size: 36rpx;
font-weight: bold;
}
.font_16 {
margin-left: 6rpx;
font-size: 32rpx;
font-weight: 200;
}
.color_purple {
color: #C958FF;
}
.flex_1,
.flex_2 {
flex-direction: row;
align-items: center;
}
.flex_2 {
justify-content: space-between;
}
.scroll_box {
width: 110rpx;
align-items: flex-start;
}
.chuantou {
background: linear-gradient(to bottom, #C55FF5, #FFFFFF);
border-radius: 12rpx;
width: 80rpx;
height: 24rpx;
margin-top: -16rpx;
opacity: 0.5;
pointer-events: none;
}
.border_bottom {
border-bottom: 2rpx solid #eaeaea;
}
.newList_headImg {
height: 100rpx;
width: 100rpx;
border-radius: 50rpx;
}
.newList_rightImg {
height: 60rpx;
width: 60rpx;
}
.newList_person {
margin-left: 24rpx;
padding-top: 10rpx;
}
.newList_text1 {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.newList_text2 {
font-size: 24rpx;
color: #fff;
}
.newList_text3 {
font-size: 24rpx;
color: #BF4FF4;
}
.newList_text4 {
font-size: 22rpx;
color: #FF5496;
}
.newList_box1,
.newList_box2,
.newList_box3 {
width: 66rpx;
height: 34rpx;
background-color: #FF758D;
border-radius: 18rpx;
margin-right: 10rpx;
align-items: center;
justify-content: center;
}
.newList_box2 {
height: 34rpx;
width: 86rpx;
background-color: #D782FF;
}
.newList_box3 {
height: 34rpx;
width: 70rpx;
background-color: #fff;
border: 2rpx solid #D782FF;
}
.swiper,
.swiper_item,
.list {
flex: 1;
}
.phpto_box {
margin: 200rpx auto;
align-items: center;
justify-content: center;
}
.img_size {
width: 446rpx;
height: 286rpx;
}
.phpto_text {
margin-top: 69rpx;
font-size: 26rpx;
color: #999999;
font-weight: bold;
}
.Btn_container {
background: linear-gradient(to right, #FE8FF9, #CA56FF);
width: 576rpx;
height: 96rpx;
border-radius: 48rpx;
align-items: center;
justify-content: center;
}
.Btn_text {
color: #fff;
font-size: 30rpx;
font-weight: bold;
}
</style>
在这里，我得事先声明一下，这里swiper不赋值给高度，是由于class已经给了flex:1 自填充，而swiper-item也是同理的。相当于，我在swiper拿到flex:1 一直走到list 再给list flex:1 借助list 的渲染机制，超出的内容在内容滚动时得到渲染，而向上划走的内容又被机制重新回收了。
补充：这里的案例，只适用于tab切换栏设死为吸顶部分。(通常为 消息列表页)
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
