做項目的時候遇到仿美團上的滾動菜單，需要調用后臺數據的，以下是為大家整理的
wxml

<view class="ification"><swiper class="swiper" bindchange="swiperChange"><swiper-item class="swipers" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key='index'><view class="info" wx:for="{{item}}" wx:for-item="item" wx:for-index="i" catchtap="retus" wx:key='index'><view class="jians"><text>HOT</text></view><view class="avatar"><image src="{{item.avatar}}"></image></view><view class='row'><view class="title">{{item.name}}</view></view></view></swiper-item></swiper><view class="indicator"><block wx:for="{{list}}" wx:key='index'><view class="swiper_item {{index == currentSwiper ? ' activeel' : ''}}"></view></block></view></view>

js

data:{list: [{avatar: '自己的圖片地址',name: '健身',},{avatar: '自己的圖片地址',name: '餐飲',},{avatar: '自己的圖片地址',name: '視頻',},{avatar: '自己的圖片地址',name: '旅游',},{avatar: '自己的圖片地址',name: '出行',},{avatar: '自己的圖片地址',name: '醫療',},{avatar: '自己的圖片地址',name: '電影',},{avatar: '自己的圖片地址',name: '寵物',},{avatar: '自己的圖片地址',name: '理發',},{avatar: '自己的圖片地址',name: '理發',},{avatar: '自己的圖片地址',name: '理發',},{avatar: '自己的圖片地址',name: '理發','},{avatar: '自己的圖片地址',name: '理發',},{avatar: '自己的圖片地址',name: '理發',},], }, // 九宮格getrecom() {var result = [] //定義一個空數組for (var i = 0; i < this.data.list.length; i += 10) {result.push(this.data.list.slice(i, i + 10));}this.setData({list: result})// console.log(this.data.list)},// 通過下標改變指示點swiperChange: function (e) {this.setData({currentSwiper: e.detail.current})},

css

.ification {width: 100%;height: 373rpx;background-color: #F7FBFF;position: relative; } .info{width: 143rpx;height: 160rpx; } .swiper {width: 100%;height: 338rpx;padding: 26rpx 21rpx;box-sizing: border-box;} .avatar{display: flex;height: 84rpx;justify-content: center;align-items: center; } .row{display: flex;justify-content: center;align-items: center; } .swipers{display: flex;flex-wrap: wrap; } .swiper_item {position: relative;float: left;width: 43rpx;height: 5rpx;border-radius: 15%;background-color: #aaa;} .activeel {width: 43rpx;background-color: #589DFC; } .avatar image{width: 75rpx;height: 75rpx; }.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden; }.swiper-box view {text-align: center; }.jians {width: 74rpx;height: 30rpx;border-radius: 100rpx;position: absolute;left: 52rpx;font-size: 23rpx;display: flex;justify-content: center;background: linear-gradient(to left, #FF5A1C, #FFAB60);}.indicator {width: 100%;height: 30rpx;display: flex;flex-direction: row;justify-content: center;align-items: center; }

總結

以上是生活随笔為你收集整理的微信小程序实现分类菜单 swiper分类菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。