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


Posted in Javascript onJune 11, 2020

微信小程序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实现滚动到锚点内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 #Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 #Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 #Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 #Javascript
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
You might like
ThinkPHP模板输出display用法分析
2014/11/26 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python如何使用腾讯云发送短信
2020/09/17 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
写求职信要注意什么问题
2014/04/12 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
高中升旗仪式主持词
2015/07/03 职场文书