微信小程序 仿美团分类菜单 swiper分类菜单


Posted in Javascript onApril 12, 2017

有同学要仿美团分类菜单.写了一个.

跟 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似

微信小程序 仿美团分类菜单 swiper分类菜单

代码:

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 });
 },
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
js动态引入的四种方法
May 05 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
微信小程序 引入es6 promise
Apr 12 #Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 #Javascript
Vue 实用分页paging实例代码
Apr 12 #Javascript
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于JavaScript定位当前的地理位置
Apr 11 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP基于单例模式实现的mysql类
2016/01/09 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python中随机函数random用法实例
2015/04/30 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
违反学校规定检讨书
2014/01/18 职场文书
采购部部长岗位职责
2014/02/06 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
仓库管理制度范本
2015/08/04 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
导游词之吉林花园山
2019/10/17 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB