微信小程序实现分类菜单 swiper分类菜单

做项目的时候遇到仿美团上的滚动菜单，需要调用后台数据的，以下是为大家整理的
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>

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分类菜单相关推荐

自动采集头像大全微信小程序源码支持多分类多种流量主
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
【小程序源码】自动采集头像大全微信小程序源码支持多分类
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
小程序源码：自动采集头像大全微信小程序源码支持多分类-多玩法安装简单
这是一款以头像为主的一款微信小程序源码该小程序内包含了各种分类,各种样式都有可以说是目前最全的一款头像小程序源码五大分类情侣,女生,男生,卡通,风景每大分类下面都有N个小分类,每个小分类下面有 ...
纯头像微信小程序源码下载,多分类头像自动采集
这是一款纯头像的微信小程序除了头像没有其它功能头像有多种分类,功能简洁实用另外该小程序无需服务器和域名该小程序安装方法如下: 解压域名以后然后使用微信开发者工具打开该小程序源码然后配置一下合 ...
微信小程序：纯头像微信小程序源码下载,多分类头像自动采集无需服务器和域名
这是一款纯头像的微信小程序除了头像没有其它功能头像有多种分类,功能简洁实用支持流量主模式收益另外该小程序无需服务器和域名该小程序安装方法如下: 解压域名以后然后使用微信开发者工具打开该小程序 ...
微信小程序API之showActionSheet（操作菜单）
微信小程序API之showActionSheet(操作菜单) wxml: <button bindtap="cd01">操作菜单01</button> &l ...
微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文微信小程 ...
在线电子书阅读微信小程序毕业设计（2）分类
wxml代码  <view class="chaxun"><input class=" ...
【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar
方法一:通过app.json配置底部菜单(常用) 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象全局配置 | 微信开放文档微信开发者平台文档htt ...

微信小程序实现分类菜单 swiper分类菜单

微信小程序实现分类菜单 swiper分类菜单相关推荐

最新文章

热门文章