微信小程序 仿美团分类菜单 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 相关文章推荐
JSON.stringify 语法实例讲解
Mar 14 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
基于Vue.js实现tab滑块效果
Jul 23 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
Javascript实现关闭广告效果
Jan 29 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
2014年教师业务学习材料
2014/05/12 职场文书
国贸专业求职信
2014/06/28 职场文书
统计学教授推荐信
2014/09/18 职场文书
入党自荐书范文
2015/03/05 职场文书
同学会演讲稿
2019/04/02 职场文书
导游词之山东八大关
2019/12/18 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL