微信小程序 仿美团分类菜单 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中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
小程序开发之模态框组件封装
Apr 23 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
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python将list转为matrix的方法
2018/12/12 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
化学教育专业求职信
2014/07/08 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
家庭困难证明
2014/10/12 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android