vue2.0 better-scroll 实现移动端滑动的示例代码

2024-02-16 14:00:11

写在前面的话：

上一篇文章实现了滑动效果，这部分来试试左右联动效果的实现方法吧

效果：滑动右侧时，左侧也能有相应的变化；点击左侧时，右侧也能自动定位到相应的位置。

如下图所示界面，左侧为分栏，右侧为分栏详情。

滑动右边使左边联动的大概的思路：

1）要知道右侧的列表中，每一个分栏所占的高度，存进一个数组中。

2）实现左边联动，则必须要监控 “scroll”事件，获取其高度

3）将scroll 的高度与右侧分栏的高度进行比较，获得其 index 值

4）左侧的分类中，使与 index 相应的分栏高亮即可~

余留的问题：额，左侧怎么跟着一起滚动？应该还需要判断一下当前左侧栏中的scroll的位置，然后使之跟随变化，但是不同尺寸的手机，高度不一，怎么解决？？？我不知道……

点击左边时，右边实现自动定位的大概思路：

1）首先要使点击有效，因为 better-scroll将默认事件都阻止了

2）为左侧的分栏绑定点击事件，并获取 index ，然后使右边的相应 index 分类滚动就行了~so easy ....but!!!

怎么下手？！！

1. 先实现滑动右边触发左边的功能：

做法：

（1）定义变量先~ 在data中加入一个 listHight: [] 数组；一个变量scrollY ： 0，用来装目前的scroll的y位置坐标

（2）在methods 中定义一个函数计算高度，此处还要用到一个知识点（如何获取分类列表dom元素？）还记得上一篇中使用到的this.$refs 吗？

我们先给要获取高度的那个元素取个类名，名字叫：“food-list-hook”：

let foodList =this.$refs.foodsWrapper.getElementsByClassName('food-list-hook') 这样就获取了所有分类列表啦，计算方法定义如下：

_calculateHeight () {
    // console.log(this)
    let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
    let height = 0
    this.listHight.push(height)
    for (let i = 0; i < foodList.length; i++) {
     let item = foodList[i]
     height += item.clientHeight
     this.listHight.push(height)
    }
}

（3）然后在计算属性computed 中，来比较数组中的高度值与当前的 scroll 的y坐标值，返回的是当前所在高度的index值：

在执行这一步时，scrollY的值，要怎么得到？（通过better-scroll 检测“scroll”事件得到，此时，需要给其加上相应的参数，做法如截图中画红线处所示）

currentIndex () {
    for (let i = 0; i < this.listHight.length; i++) {
     let height1 = this.listHight[i]
     let height2 = this.listHight[i + 1]
     if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
      return i
     }
    }
    return 0
   }
 }

（4）在 template 中，将此index 值绑定到index 值相等的左侧的列表分栏中，并指定一个类名，叫 current，如下图中的画红线的部分：

（5）在style中，将相应的current 类加上相应的样式即可：

2. 再来实现点击左边，右边联动的效果

（1）使左边栏点击有效，如下图红线标注所示：

（2）为左侧栏添加相应的点击事件：

（3）在methods 中编写点击触发的事件 selectMenu()方法，利用获取的 $index 使右边进行相应的滚动，其中 300ms是加上了一个过渡效果：

试试吧~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

vue better-scroll插件使用详解
vue使用 better-scroll的参数和方法详解
vue利用better-scroll实现轮播图与页面滚动详解
vue滚动轴插件better-scroll使用详解
详解 vue better-scroll滚动插件排坑

vue利用better-scroll实现轮播图与页面滚动详解

前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
vue滚动轴插件better-scroll使用详解

跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我
详解 vue better-scroll滚动插件排坑

BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur
vue使用 better-scroll的参数和方法详解

格式:var obj = new BScroll(object,{[option1,],.,.}); 注意: 1.要确保object元素的高度比其父元素高 2.使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh() Options 参数 startX: 0 开始的X轴位置 startY: 0 开始的Y轴位置 scrollY: true 滚动方向为 Y 轴 scrollX: true 滚动方向为 X 轴 click: true 是否派发click事件,通常
vue better-scroll插件使用详解

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, star
vue2.0使用swiper组件实现轮播的示例代码

1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di
vue2.0 better-scroll 实现移动端滑动的示例代码

写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应
vue2.0项目中使用Ueditor富文本编辑器示例代码

最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置首先把官网下载的Ueditor资源,放入静态资源src/static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.引入在main.js中引入 import '../static/UE/ueditor.
vue2.0的contextmenu右键弹出菜单的实例代码

整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享. 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script>
基于vue2.0实现仿百度前端分页效果附实现代码

前言上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件先看实现效果图代码实现按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum
ThinkPHP整合datatables实现服务端分页的示例代码

最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi
vue ssr+koa2构建服务端渲染的示例代码

之前做了活动投放页面在百度.360等渠道投放,采用 koa2 + 模版引擎的方式.发现几个问题相较于框架开发页面效率较低,维护性差兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器. 服务端渲染服务端渲染和单页面渲染区别查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构.而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上. @vue/c
OpenCV绘制圆端矩形的示例代码

目录功能函数测试代码测试效果本文主要介绍了OpenCV绘制圆端矩形的示例代码,分享给大家,具体如下: 功能函数 // 绘制圆端矩形(药丸状,pill) void DrawPill(cv::Mat mask, const cv::RotatedRect &rotatedrect, const cv::Scalar &color, int thickness, int lineType) { cv::Mat canvas = cv::Mat::zeros(mask.size(), CV
vue2.0s中eventBus实现兄弟组件通信的示例代码

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是
C++编写的WebSocket服务端客户端实现示例代码

目录使用过标准的libwebsockets服务端库测试过,主要是短小精悍,相对于libwebsockets不需要依赖zlib和openssl 以及其他库,直接make就可以使用了,linux跟windows都可以使用. 测试用例: #include "easywsclient.hpp" #include <assert.h> #include <stdio.h> #include <string> using easywsclient::WebSo

vue2.0 better-scroll 实现移动端滑动的示例代码

您可能感兴趣的文章:

相关推荐

随机推荐