微信小程序 仿美团分类菜单 swiper分类菜单
2017-05-22 13:49
204 查看
有同学要仿美团分类菜单.写了一个.
跟 微信小程序开发之选项卡(窗口顶部TabBar)页面切换很类似
代码:
js就这么一点
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
demo下载地址
原文地址:http://blog.csdn.net/qq_31383345/article/details/54426932
跟 微信小程序开发之选项卡(窗口顶部TabBar)页面切换很类似
代码:
js就这么一点
//index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) { console.log(e.currentTarget.dataset.id) console.log(e.currentTarget.dataset.index) wx.showToast({ title: '第' + e.currentTarget.dataset.id + '栏' + '第' + e.currentTarget.dataset.index + '个', icon: 'success', duration: 1500 }) }, /** * 滑动切换tab */ bindChange: function (e) { console.log(e.detail.current) this.setData({ currentTab: e.detail.current }); }, })1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
demo下载地址
原文地址:http://blog.csdn.net/qq_31383345/article/details/54426932
相关文章推荐
- 微信小程序 仿美团分类菜单 swiper分类菜单
- 微信小程序 仿美团分类菜单 swiper分类菜单
- 微信小程序 仿美团分类菜单 swiper分类菜单
- 005 - 微信小程序 仿美团分类菜单 swiper分类菜单
- 微信小程序实现美团菜单
- 微信小程序8-swiper(滑动面板)
- 微信小程序swiper个性化定制
- 微信小程序 轮播图 swiper图片组件
- 微信小程序例子——使用swiper组件实现图片切换
- 微信小程序(十)swiper组件详细介绍
- 微信小程序底部菜单详解
- 微信小程序之二三级菜单(navigateTo传递数据的应用)
- 微信小程序把玩(十)swiper组件
- 微信小程序开发之圆形菜单 仿建行圆形菜单实例
- 微信小程序基础之试图控件View、ScrollView、Swiper
- 微信小程序学习(三)之swiper组件
- 微信小程序的轮播图swiper问题
- 美团商家分类菜单
- 微信小程序 教程之wxapp视图容器 swiper