微信小程序 仿美团分类菜单 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 相关文章推荐
node.js中的fs.chown方法使用说明
Dec 16 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
vue权限问题的完美解决方案
May 08 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 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将两个关联数组合并函数提高函数效率
2014/03/18 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
JavaScript交换两个变量方法实例
2019/11/25 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
pytorch中图像的数据格式实例
2020/02/11 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
介绍一下write命令
2014/08/10 面试题
银行先进个人事迹材料
2014/05/11 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers