> `长列表swiper左右切换`功能很常见，所以本人特意介绍一下 [TOC] ## 客户端代码 > tab用的是uview的组建，当然uview也有tabsSwiper组建，更简单，本文进行tab、swiper、scroll-view长列表的演示 > 注意：swiper是单页组件，做长列表会有性能问题，[官方有一个nvue新闻模板示例，内有左右滑动tab功能，解决性能问题](https://ext.dcloud.net.cn/plugin?id=103) ~~~ <template> <view> <u-tabs bgColor="#FFFFFF" active-color="#EE5A24" :list="types" :is-scroll="true" :current="current" @change="change"></u-tabs> <swiper class="swiper" v-bind:style="{height:swiperH+'px'}" :duration="duration" :current="current" @change="changeSwiper"> <swiper-item class="tab-body" v-for="(type, index) in types" :key="index"> <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom(index)"> <view class="ym-gird" v-for="(item,index2) in itemList[index]" @click="navto(item)" :key="index2"> <text>{{item.name}}</text> <text>来自：{{item.frompage}}页</text> </view> <u-loadmore :status="status[index]" /> </scroll-view> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { types: [ {name: "热门"}, {name: "国产"}, {name: "综艺"}, {name: "喜剧"}, {name: "科幻"}, {name: "动漫"}, {name: "日韩"}, {name: "欧美"} ], current: 0, swiperH: 0, duration: 500, itemList: [], status: [], page: [] } }, onLoad() { // 初始化swiper高度 let tabH = uni.upx2px(80); //80rpx转换px this.swiperH = uni.getSystemInfoSync().windowHeight - tabH; // 初始化 itemList，status，page数组列表 for (let i=0; i<this.types.length;i++) { this.itemList.push([]) this.status.push('loadmore') this.page.push(1) } // 加载第1个swiper item的数据 this.loadData(); }, methods: { change(index) { this.current = index; // change() 会触发changeSwiper()事件，所以 loadData()统一在changeSwiper()中调用 }, changeSwiper(event) { this.current = event.detail.current; if (this.itemList[this.current].length == 0) { this.loadData(); } }, onreachBottom(index) { this.page[this.current]++; this.status[this.current] = 'loading'; var that = this; uni.request({ url: "http://www.test.com/wk/list?name=" + this.types[this.current].name + "&page=" + this.page[this.current], data: "", method: "GET", header: { "content-type": "application/json" }, success: function(res) { let list = that.itemList[that.current].concat(res.data.data); that.$set(that.itemList, that.current, list); if (res.data.data.length < 10) { that.$set(that.status, that.current, 'nomore'); } else { that.$set(that.status, that.current, 'loading'); } }, fail: function() { that.page[that.current]--; uni.showModal({ title: "网络错误", content: "网络出错，请刷新重试", showCancel: !1 }); } }) }, loadData() { uni.showLoading({ title: "正在加载..." }); this.page[this.current] = 1; this.status[this.current] = 'loading'; var that = this; uni.request({ url: "http://www.test.com/wk/list?name=" + this.types[this.current].name + "&page=" + this.page[this.current], data: "", method: "GET", header: { "content-type": "application/json" }, success: function(res) { uni.hideLoading(); that.$set(that.itemList, that.current, res.data.data); if (res.data.data.length < 10) { that.$set(that.status, that.current, 'nomore'); } else { that.$set(that.status, that.current, 'loading'); } }, fail: function() { uni.hideLoading(); uni.showModal({ title: "网络错误", content: "网络出错，请刷新重试", showCancel: !1 }); } }) }, navto(e) { return; uni.navigateTo({ url: '/pages/main/main?id='+e.vod_id }) } } } </script> <style lang="scss"> .swiper {width: 100%;} .tab-body {width: 100%;height: 100%;} .ym-gird {padding: 30rpx;background-color: #eaedf1;color:#000;margin-bottom: 10rpx;} </style> ~~~ ## 服务端代码 ~~~ public function actionList() { $name = get('name'); $page = get('page', 1); $pagesize = 10; if ($page > 5) jsonSuccess([]); $items = array(); for ($i=0; $i<$pagesize; $i++) { $number = $i+1; $items[] = [ 'name' => $name."(第{$number}个)", 'frompage' => $page ]; } jsonSuccess($items); } ~~~