微信小程序 仿美团分类菜单 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操作文本框readOnly
May 15 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
公司薪酬管理制度
2014/01/31 职场文书
学校消防演习方案
2014/02/19 职场文书
学校对教师的评语
2014/04/28 职场文书
我的小天地教学反思
2014/04/30 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
正规欠条模板
2015/07/03 职场文书
董事长秘书工作总结
2015/08/14 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android