* [展示效果](https://www.kancloud.cn/wangking/uniapp/1899519#_4) * [test.vue](https://www.kancloud.cn/wangking/uniapp/1899519#testvue_8) * [参考文档：](https://www.kancloud.cn/wangking/uniapp/1899519#_157) > 分类轮播用的是swiper组件 ## 展示效果  ## test.vue ~~~ <template> <view> <view class="category"> <view class="box"> <swiper class="swiper" duration="300" :style="{ height: categoryHeight }" @change="categoryChange"> <swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex" > <view class="category-list"> <view class="icon" v-for="category in page" :key="category.cat_id" @tap="toCategory(category)"> <image mode="widthFix" :src="category.img" @load="categoryImgLoad"></image> <view>{{ category.title }}</view> </view> </view> </swiper-item> </swiper> <view class="dots"> <view v-for="(page, pageindex) in categoryList" :key="pageindex" :class="{ active: pageindex == currentPageindex }"></view> </view> </view> </view> </view> </template> <script> export default { data(){ return { categoryHeight: '150px', currentPageindex: 0, categoryList: [ [//第一页 { cat_id: 0, img: '../../static/HM-shophome/category-img/0.png', title: '吹风机' }, { cat_id: 1, img: '../../static/HM-shophome/category-img/1.png', title: '发箍' }, { cat_id: 2, img: '../../static/HM-shophome/category-img/2.png', title: '肥皂' }, { cat_id: 3, img: '../../static/HM-shophome/category-img/3.png', title: '粉饼' }, { cat_id: 4, img: '../../static/HM-shophome/category-img/4.png', title: '化妆镜' }, { cat_id: 5, img: '../../static/HM-shophome/category-img/5.png', title: '睫毛膏' }, { cat_id: 6, img: '../../static/HM-shophome/category-img/6.png', title: '睫毛夹' }, { cat_id: 7, img: '../../static/HM-shophome/category-img/7.png', title: '精华' }, { cat_id: 8, img: '../../static/HM-shophome/category-img/8.png', title: '口红' }, { cat_id: 9, img: '../../static/HM-shophome/category-img/9.png', title: '面膜' } ], [//第二页 { cat_id: 10, img: '../../static/HM-shophome/category-img/10.png', title: '面霜' }, { cat_id: 11, img: '../../static/HM-shophome/category-img/11.png', title: '乳液' }, { cat_id: 12, img: '../../static/HM-shophome/category-img/12.png', title: '梳子' }, { cat_id: 13, img: '../../static/HM-shophome/category-img/13.png', title: '刷子' }, { cat_id: 14, img: '../../static/HM-shophome/category-img/14.png', title: '洗脸仪' }, { cat_id: 15, img: '../../static/HM-shophome/category-img/15.png', title: '洗面奶' }, { cat_id: 16, img: '../../static/HM-shophome/category-img/16.png', title: '香水' } ] ] } }, onLoad() { this.$cache.set('taobaoId', 'xxxx212'); }, methods: { //分类图片加载完毕 categoryImgLoad(e){ this.categoryImg = this.categoryImg?this.categoryImg+1:1; //完成加载11个分类图片开始计算分类高度，若分类图片不足10个则修改此处的10。 if(this.categoryImg==10){ this.getCategoryHeight(); } }, //更新分类高度 getCategoryHeight() { let view = uni.createSelectorQuery().select('.category-list'); view.fields( { size: true }, data => { this.categoryHeight = data.height + 'px'; } ).exec(); }, //更新分类指示器 categoryChange(event) { this.currentPageindex = event.detail.current; }, //分类跳转 toCategory(e){ uni.showToast({title: e.title}); } } } </script> <style lang="scss"> .category { width: 95%; padding: 2.5vw 2.5vw; background-color: #ff570a; .box { width: 100%; border-radius: 20upx; background-color: #ffffff; .dots { display: flex; justify-content: center; height: 15upx; width: 100%; view{ width: 30upx; height: 5upx; background-color: rgba(0, 0, 0, 0.2); &.active { background-color: #ff570a; } } } .swiper { width: 100%; padding: 10upx 0; .uni-swiper-dot { width: 20upx; } .category-list { width: 100%; height: auto; display: flex; justify-content: flex-start; padding: 10upx 0; flex-flow: wrap; .icon { width: 20%; display: flex; flex-flow: wrap; justify-content: center; font-size: 22upx; color: #666; image { width: 70%; height: 13.3vw; } view{ width: 100%; display: flex; justify-content: center; } } } } } } </style> ~~~