此次阐述的内容是使用uniapp小程序端实现顶部选项卡的功能。
如下三步即将实现:
一:view层
<scroll-view class="tab" scroll-x="true" :scroll-left="scrollLeft">
<block v-for="(item,index) in tabData" :key="index">
<!-- 标签动态样式 -->
<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " :data-current="index"@click="clickTab">
{{item.title}}
</view>
</block>
</scroll-view>
<!-- 选项卡页面 -->
<swiper class="swiper" :current="currentTab" duration="300" @change="swiperTab" :style=" {height: windowHeight +'px'} ">
<swiper-item v-for="(item,index) in tabData" :key="index">
<scroll-view scroll-y="true" :style=" {height: windowHeight +'px'} " @scrolltolower="getMore">
<view class="page-item">
<view v-for="(item,index2) in contentData" :key="index2">
<!-- v-if="currentTab==item.type" 只渲染当前页面对应的数据,不然每个页面的内容都相同-->
<view v-if="currentTab==item.type">
<!-- <image class="box-image" mode="aspectFill" :src="item.imgeUrl"></image> -->
<view> {{item.content}} </view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
二:JS层(javascript)
import datac from "../../data/ajax.js"
export default {
data() {
return {
ajax: datac,
currentTab: 0, //标签初始位置
scrollLeft: 0, //tab标题的滚动条位置
windowHeight: 0,
windowWidth: 0,
tabData: [ //标签数据
{
type: 0,
title: "最新"
},
{
type: 1,
title: "热门"
}
],
contentData: [] //内容数据
}
},
onLoad() {
wx.getSystemInfo({ //获取系统信息
success: (res) => {
this.windowHeight = res.windowHeight
this.windowWidth = res.windowWidth
}
});
this.getData()
},
methods: {
//点击切换
clickTab(e) {
let clickIndex = e.target.dataset.current //当前标签的索引
let singleNavWidth = this.windowWidth / 2 //每个标签的宽度, 显示5个标签
this.scrollLeft = (clickIndex - 2) * singleNavWidth //水平滚动条位置, tab选项居中
if (this.currentTab === clickIndex) {
return false;
} else {
this.currentTab = clickIndex //使页面对应标签
this.getData()
}
},
//滑动切换
swiperTab(e) {
let swiperIndex = e.detail.current //当前页面的索引
let singleNavWidth = this.windowWidth / 2 //每个标签的宽度 ,显示5个标签
this.scrollLeft = (swiperIndex - 2) * singleNavWidth //使标签跟随页面滚动,超过屏幕范围的标签显示出来
this.currentTab = swiperIndex //使标签对应页面
this.getData()
},
//根据页面索引获取对应的云数据
getData() {
let type = this.currentTab
if (datac.contentDate.code == 2000 || datac.contentDate == 2002) {
var list = datac.contentDate.data
if (list.length > 0) {
for (var i = 0; i < list.length; i++) {
var m = list[i]
console.log("var" + type + "==" + m.type);
if (type == m.type) {
console.log("1" + JSON.stringify(list[i]))
this.contentData = [];
this.contentData.push(list[i])
} else {
this.contentData.push(list[i])
}
}
}
}
},
// 加载更多
getMore() {
//this.getData()
}
}
}
三:css层
page {
height: 100%;
width: 100%;
}
.tab {
/* 标签栏 */
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
/* 固定吸顶 position: fixed; */
top: 0;
left: 0;
z-index: 99;
}
.tab-item {
/* 单个标签 */
width: 50%;
display: inline-block;
text-align: center;
}
.active {
/* 选项卡活动时的样式 */
color: #F65959;
font-size: 20px;
}
.page-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding-top: 80rpx;
padding-left: 16rpx;
}
.page-item-box {
display: flex;
flex-direction: column;
height: 320rpx;
width: 220rpx;
/* background-color: #808080; */
/* border:1px solid #cc22b0; */
/* 边框 */
border-radius: 5px;
box-shadow: 0 2px 2px rgba(34, 25, 25, 0.4);
/* 框阴影 */
text-align: center;
/* 居中对齐 */
margin: 10rpx;
}
.box-image {
height: 280rpx;
width: 220rpx;
border-radius: 5px;
}
最后数据请求ajax.js