微信小程序 仿美团分类菜单 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 相关文章推荐
探讨JavaScript语句的执行过程
Jan 28 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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&java(三)
2006/10/09 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php实现小程序支付完整版
2018/10/09 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python中的魔法方法深入理解
2014/07/09 Python
python使用opencv进行人脸识别
2017/04/07 Python
老生常谈Python基础之字符编码
2017/06/14 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
2015年化验室工作总结
2015/04/23 职场文书
辩论会主持词
2015/07/03 职场文书
毕业班工作总结
2015/08/10 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server