微信小程序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 相关文章推荐
JavaScript Promise启示录
Aug 12 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
多页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
php 异常处理实现代码
2009/03/10 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php数据访问之增删改查操作
2016/05/09 PHP
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
javascript之Array 数组对象详解
2016/06/07 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python构建基础的爬虫教学
2018/12/23 Python
python实现简单flappy bird
2018/12/24 Python
pandas如何处理缺失值
2019/07/31 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
python判断正负数方式
2020/06/03 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
自我评价个人范文
2013/12/16 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
yy婚礼主持词
2014/03/14 职场文书
合伙协议书范本
2014/04/21 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server