微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

1.wxml代码:

<view class="page">
 <import src="../../components/catering-item/catering-item.wxml" />
<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view class="body">
<view style='float: left' class='left'>
 <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY'  style='height: {{winHeight}}px'>
  <view class='all clear'>
   <block wx:key="tabs" wx:for="{{tabs}}">
    <view bindtap='jumpIndex' data-menuindex='{{index}}'data-anchor='{{item.anchor}}'>
     <view class="text-style {{indexId==index?' activeView':''}}">
      <text class="{{indexId==index?'active1':''}}">{{item.title}}</text>
     </view>
    </view>
   </block>
  </view>
 </scroll-view>
</view>
<view class="right" style='height: {{winHeight}}px'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" bindscroll="scrollToLeft" scroll-into-view="{{toTitle}}" class='scrollRight' style='height: {{winHeight}}px'>
  <block wx:key="tabs" wx:for="{{tabs}}">
  <view id="view-{{item.anchor}}">
     <view class="title" id="title-{{item.anchor}}">{{item.title}}</view>
     <view class="orders" wx:for="{{tabsList[item.anchor]}}">
      <template is="cateringItem" data="{{...item}}" />
     </view>
    </view>
  </block>
 </scroll-view>
 </view>
</view>
</view>

2.wxss代码:

@import "../../components/catering-item/catering-item.wxss";
/* pages/catering.wxss */
.page {
 display: flex;
 flex-direction: column;
 width: 100%;
 /* background: #F7F4F8; */
 background-image: linear-gradient(90deg, #FCFCFC 0%, #FCFCFC 99%);
 /* padding-top: 16px; */
}
.under_line{
 width: 100%;
 border-top: 1rpx solid #efefef;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

.body{
 display: flex;
 width: 100%;
}

.scrollY {
 width: 200rpx;
 /* position: fixed;
 left: 0;
 top: 0; */
 background: #F5F5F5;
 /* border-right: 1rpx solid #efefef; */
}

/* scrollRight{
 flex: 1;
} */
.right{
 flex: 1;
 /* height: 200rpx; */
 /* background: #00FF00; */
}

.left {
 border-top: 1rpx solid #efefef;
 border-right: 1rpx solid #efefef;
}

.text-style {
 width: 200rpx;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 28rpx;
 font-family: PingFangSC-Semibold;
 color: rgba(51, 51, 51, 1);
}

.active1 {
 color: #E5D1A9;
 /* background: #FFF; */
}
.activeView{
  background: #FFF;
}

.active {
 display: block;
 width: 50rpx;
 height: 6rpx;
 background: #E5D1A9;
 position: relative;
 left: 75rpx;
 bottom: 30rpx;
}
.title{
 margin-left: 32rpx;
 padding-top: 16rpx;
 font-size: 28rpx;
 /* padding-bottom: 16rpx; */
}

3.js代码

// pages/catering.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  tabs: [
   { title: '特惠', anchor: 'a', },
   { title: '必点', anchor: 'b', },
   { title: '营养汤', anchor: 'c', },
   { title: '主食', anchor: 'd', },
   { title: '套餐', anchor: 'e', },
   { title: '饮料', anchor: 'f', },
  ],
  tabsList: {
   a: [{
    price: 10.1, anchor: "a", index: 0, num: 0
   }, {
    price: 10.2, anchor: "a", index: 1, num: 0
   },
   {
    price: 10.3, anchor: "a", index: 2, num: 0
   },],
   b: [{
    price: 10.4, anchor: "b", index: 0, num: 0
   }, {
    price: 10.5, anchor: "b", index: 1, num: 0
   },
   {
    price: 10.6, anchor: "b", index: 2, num: 0
   },],
   c: [{
    price: 10.7, anchor: "c", index: 0, num: 0
   }, {
    price: 10.8, anchor: "c", index: 1, num: 0
   },
   {
    price: 10.9, anchor: "c", index: 2, num: 0
   },],
   d: [{
    price: 11.0, anchor: "d", index: 0, num: 0
   }, {
    price: 11.1, anchor: "d", index: 1, num: 0
   },
   {
    price: 11.2, anchor: "d", index: 2, num: 0
   },],
   e: [{
    price: 11.3, anchor: "e", index: 0, num: 0
   }, {
    price: 11.4, anchor: "e", index: 1, num: 0
   },
   {
    price: 11.5, anchor: "e", index: 2, num: 0
   },],
   f: [{
    price: 11.6, anchor: "f", index: 0, num: 0
   }, {
    price: 11.7, anchor: "f", index: 1, num: 0
   },
   {
    price: 11.8, anchor: "f", index: 2, num: 0
   },]
  },
   indexId: 0,
  toTitle:"title-c",
  scrollTop:0,
  top:[],
  },
  // 左侧点击事件
  jumpIndex(e) {
   let index = e.currentTarget.dataset.menuindex;
   let anchor = e.currentTarget.dataset.anchor;
   let that = this
   that.setData({
    indexId: index,
    toTitle: "title-" + anchor
   });
   //可以设置定位事件

  },

 scrollToLeft(res){
  console.log("scrollToLeft-res:" + JSON.stringify(res) + JSON.stringify(this.data.top));
  // let top=res.detail.scrollTop;
  this.setData({
   scrollTop: res.detail.scrollTop
  })
  var length = this.data.top.length;
  for(var i=0;i<this.data.top.length;i++){
   if (this.data.top[i] - this.data.top[0] <= this.data.scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > this.data.scrollTop)){
    if(this.data.indexId!=i){
     this.setData({
      indexId: i,
     });
    }
   }
  }
  // console.log("top:"+top);
 },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   var that = this
   wx.getSystemInfo({
    success: function (res) {
     that.setData({
      winHeight: res.windowHeight
     });
     var top2=new Array();
     for(var i=0;i<that.data.tabs.length;i++){
      wx.createSelectorQuery().select('#view-' + that.data.tabs[i].anchor).boundingClientRect(function (rect) {

       var isTop=Number(rect.top);

       top2.push(isTop);
       console.log("view-c:" + JSON.stringify(rect));

      }).exec();

     }
     that.setData({
      top: top2
     });
    }

   });

  },

})

说明:

wxml中的template是菜品的item,可根据自己的需求进行定义。

使用到scroll-view的scroll-into-view属性用于对左侧菜单种类点击定位到右侧菜单的具体位置,js中的jumpIndex为用户点击左侧菜单,对应选中位置改变,和对右侧菜单进行定位。

js中scrollToLeft用于实现用户滚动右侧菜单,对左侧菜单分类进行定位操作,主要思想是将右侧菜单中的种类标签的top位置记录下来,当右侧scroll-view滑动的位置小于等于某一个top,而大于下一个top时,则更换左侧种类菜单到指定位置。

总结

到此这篇关于微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)的文章就介绍到这了,更多相关微信小程序 scroll-view实现滚动到锚点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

  • 微信小程序-横向滑动scroll-view隐藏滚动条

    wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

  • 微信小程序scroll-view实现滚动穿透和阻止滚动的方法

    scroll-view滚动穿透,阻止滚动 页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove="doNothing"></view> 也可直接写catchtouchmove,相当于绑定了事件名为t

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 微信小程序scroll-view仿拼多多横向滑动滚动条

    本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下 效果图 实现代码 index.wxml <scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}&

  • 微信小程序 scroll-view实现锚点滑动的示例

    前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

  • 微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

    1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" /> <!-- 左侧滚动栏 --> <view class='under_line'></view> <view class="body"> <view style='float: l

  • 微信小程序实战之仿android fragment可滑动底部导航栏(4)

    底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因

  • 微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

    实现类似ios端微信的左滑显示置顶.删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕.利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差值来改变整个卡片的位置. 这里有一个细节,为了防止按钮的点击干扰到卡片主部分的滑动,需要将整个卡片分为两部分. <View style={`${positionStyle[index]}`}> <View onTouchStart={this.moveTaskStart} onTouchMo

  • 微信小程序仿淘宝热搜词在搜索框中轮播功能

    摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏 代码 已封装成组件 组件代码: wxs

  • 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替. 二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件 @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boots

  • 微信小程序实现上传word、txt、Excel、PPT等文件功能

    正文: 目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现: 实现流程: 1. 在小程序后台配置业务域名 2. 在服务器写一个html,实现表单上传文件 3.后端php接收文件并存到一个服务器文件夹,把文件名存到数据库以后检索用 4.在微信小程序创建一个页面,里面使用web-view达到上传文件的目的: 效果图: 具体实现: 1. 在小程序后台配置业务域名 2. 在服务器写一个html,实现表单上传文件 index.html文件 <!DOCTYPE html> &

  • 微信小程序scroll-view实现左右联动效果

    微信小程序利用scroll-view实现左右联动,供大家参考,具体内容如下 点击左边的按钮时,右边可以跳动到指定的位置 首先要注意使用scroll-view竖屏滚动,需要给scroll-view固定高度 其次在点击时,需要给需要滚动的scroll-view加上scroll-into-view,其值应该是子元素的id,且id不能以数字 开头 滚动右边,左边菜单跳到相应的位置 其实现的思想是,在右边滚动屏滚动时,得到滚动的距离.将右边滚动屏中各模块到达顶部的距离计算出来放到一个数组中.第一个模块的滚

  • 微信小程序picker组件简单用法示例【附demo源码下载】

    本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto

  • 微信小程序中实现手指缩放图片的示例代码

    公司开发微信小程序,pm想实现如下需求: 用手指缩放图片.其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api.wx.previewImage,就是它.预览图片.除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅.下面就说说如何用js来实现这个功能吧. 先上源码,然后在逐步剖析: Page({ data: { touch: { distance: 0

随机推荐