微信小程序 仿美团分类菜单 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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
javascript jq 弹出层实例
2013/08/25 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
PyQt5 多窗口连接实例
2019/06/19 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
触电现场处置方案
2014/05/14 职场文书
认错检讨书
2014/10/02 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
人事任命通知
2015/04/20 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
Python绘制散乱的点构成的图的方法
2022/04/21 Python
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang