> `長列表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); } ~~~