微信小程序 仿美团分类菜单 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 相关文章推荐
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
字节飞书面试promise.all实现示例
Jun 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
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
对python修改xml文件的节点值方法详解
2018/12/24 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
农民工创业典型事迹
2014/01/25 职场文书
违纪检讨书2000字
2014/02/08 职场文书
行政专员求职信范文
2014/05/03 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书