微信小程序 仿美团分类菜单 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在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
javascript实现复选框选中属性
Mar 25 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
微信小程序和百度的语音识别接口详解
May 06 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/06/07 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
宾馆总经理岗位职责
2014/02/14 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
机关保密工作承诺书
2015/05/04 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
工资证明范本
2015/06/12 职场文书
七年级作文之秋游
2019/10/21 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
用CSS3画一个爱心
2021/04/27 HTML / CSS
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android