微信小程序 仿美团分类菜单 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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
js打开word文档预览操作示例【不是下载】
May 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
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
理解javascript异步编程
2016/01/27 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python实现百度语音识别api
2018/04/10 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
自我鉴定范文
2013/11/10 职场文书
岗位职责范本
2013/11/23 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
中学生操行评语
2014/04/24 职场文书
师德师风个人反思
2014/04/28 职场文书
环保标语大全
2014/06/12 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
python实现简单反弹球游戏
2021/04/12 Python
利用Python实现Picgo图床工具
2021/11/23 Python