005 - 微信小程序 仿美团分类菜单 swiper分类菜单

有同学要仿美团分类菜单.写了一个.
微信小程序开发之选项卡(窗口顶部TabBar)页面切换很类似

仿美团分类菜单

代码:
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 });
  },
})

demo下载地址 

1,实现的需求 1)首页:标题栏获取用户当前位置,使用腾讯api实现定位,不用弹窗出现用户授权, 进入首页,获取附近商铺的列表 轮播图: 导航栏: (1)向后台发送请求来获取展示的商铺列表,综合排序,筛选实现根据用户 条件请求数据 (2)导航栏出现偏移 商铺列表: (1)带参跳转店铺 网络中断情况: 新页面提示没网,可点击刷新 2)店铺:根据店铺id获取店铺相关信息 头部:动态显示店铺的相关优惠 导航:分别切换菜单,评价,商家 菜单: 商品列表展示:左右联动,动态出现添加数量以及按钮 商品详情展示:弹窗卡片,展示详情,可动态出现添加数量以及按钮 购物车:展示添加进购物车的商品信息,清空结算,计算合价,差多少配送, 结算:(未实现),跳转支付,传后台购物车数据,用户信息,当前时间等订单 需求信息 评价:根据店铺id获取店铺的所有评价list展示 商家:展示商家优惠信息,需求(呼叫商家,查看食品安全档案) 3)订单 全部订单:根据用户信息获取相关全部订单,实现详情,再来一点(需要根据店铺 id) 待评价:需求:实现评价功能(提交:店铺id,评价信息) 退款:评价,详情 4)个人 用户信息展示: 登录: 未登录:(登录,注册实现) 用户地址: 管理地址:添加新地址,编辑地址(地址id,用户id) 客服中心:接入客服(公众号后台可设置客服人员) 退出账号:清空本地用户信息
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值