微信小程序:菜单滑动

ByteAuroraPulse
• 阅读 8602

先演示一下效果如下:
微信小程序:菜单滑动

1.左边选择类别,右边菜单滑动到对应位置
该功能只需要用微信小程序的组件:scroll-view 中 scroll-into-view属性即可,详细请看官方文档。

2.通过右边拖动,左边类别进行对应变换
该功能通过右方元素设置固定高度height,计算该类别所在的高度。然后通过scroll-view 中 bindscroll属性,监测当前显示类别进行切换。

wx.getSystemInfo({
      success: function (res) {
        self.setData({
          height: res.windowHeight,
          unitPx: res.windowWidth / 750 // 计算1rpx等于多少px
        });
      }
    }); 

通过wx.getSystemInfo获取该手机的屏幕高度、宽度等。

.menu-container .menu-right .menu-detail-header {
  background: #ec6654;
  padding: 20rpx 5rpx;
  color: #fff;
  height:50rpx;
  line-height:50rpx;
}

.menu-container .menu-right .menu-detail-list {
  background-color: #fff;
  padding: 10rpx 5rpx;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  overflow: hidden;
  height:120rpx;
}
<!-- 右边 -->
<scroll-view class="menu-right" style="height: 100%;" scroll-into-view="{{toView}}" scroll-y bindscroll="scroll">
    <view id="{{item.value}}" wx:for="{{menu_list}}">
      <view class="menu-detail-header">{{item.header}}</view>
      <view wx:for="{{item.food}}" class="menu-detail-list">
        <view class="menu-detail">
          <view>
            <image class="menu-detail-img" src="{{item.img}}"></image>
          </view>
          <view class="menu-detail-content">
            <view class="menu-detail-title">{{item.title}}</view>
            <view class="menu-detail-intro">{{item.intro}}</view>
            <view class="menu-detail-cost"><text class="text-red">{{item.cost}}</text>积分 </view>
          </view>
        </view>
      </view>
    </view> 
  </scroll-view>
scroll: function (e) {
    console.log(e.detail.scrollTop);
    var heights = this.data.listsHeight;
    var tempValue, tempId;
    for (var i in heights) {
      if (e.detail.scrollTop >= heights[i].height){
        tempValue = heights[i].value;
        tempId = heights[i].id;
      }
    }
    this.setData({
      curIndex: tempId,
      toViewLeft: tempValue
    });
  }

完整代码请移步github:
xcx-mall

此项目还包括了购物车模块,实现不久可能有很多需要改善。

以上便是该效果的实现方法,由于目前小程序不能动态获取DOM的高度。只想到这样的实现方法,如果有更好的方法,希望能分享。谢谢。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
马丁路德 马丁路德
4年前
小程序静默登录与维护自定义登录态
1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样。2.什么是静默登录?在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来说是有感的。在小程序中,由于是基于微信,可以通过微信官方提供的API能力,使我们能够无感知得获取
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Wesley13 Wesley13
3年前
PHP微信小程序支付——签名错误
!(https://static.oschina.net/uploads/space/2018/0509/141657_Tqix_3477605.png)先分清几个概念:微信公众平台、微信开放平台、微信商户平台1.微信公众平台、微信开放平台、微信商户平台是三个不同的平台2.微信公众平台:用于公众号、小程序等等的设置平台,包括APPID、APP
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
Wesley13 Wesley13
3年前
10分钟上线
_摘要:_ 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播。当微信小程序遇见serverless,他们会产生奇妙火花,利用函数计算可以快速搭建微信小程序的serverle.点此查看原文:http://clic
Wesley13 Wesley13
3年前
5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUIWXSSWeUIWXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。
使用taro+canvas实现微信小程序的图片分享功能 | 京东云技术团队
业务场景二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。使用场景及功能:微信小程序生成海报图片分享好友下载图片使用技