better-scroll的安装和使用案例

编程之家收集整理的这篇文章主要介绍了better-scroll的安装和使用案例编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

better-scroll实现左侧导航点击,右侧内容滚动,或者右侧内容滑动,左侧导航联动,下方主要介绍关于better-scroll的安装和使用案例的全文内容,希望对你有所帮助。

首先安装better-scroll:npm install better-scroll --save

然后在当前的vue页面引用:import BScroll from "better-scroll";

HTML部分:左边导航,动态样式绑定,右边内容滚动,左边导航联动,或者左边点击,右边滚动

 <!--导航背景图片选中状态-->

          <div

            class="lxp_softdetails_one_1_nav_name"

            v-for="(i,j) of List"

            :key="`List + ${j}`"

            @click="goScroll(j,i.img,i.img1)"

            :class="{

              active1: j == currentIndex && j == 0,

              active2: j == currentIndex && j == 1,

              active3: j == currentIndex && j == 2,

              active4: j == currentIndex && j == 3,

            }"

          >

          <!--导航背景图片未选中状态-->

            <div

              class="lxp_softdetails_one_1_nav_name_img"

              :style="`backgroundImage:url(${i.img1})`"

              :class="{

                backgroundNull: j == currentIndex,

                bc1: j == 0,

                bc2: j == 1,

                bc3: j == 2,

                bc4: j == 3,

              }"

            ></div>

            <div class="lxp_softdetails_one_1_nav_name_1">

              <div class="lxp_softdetails_one_1_nav_name_1_span">

                {{ i.Title }}

              </div>

            </div>

          </div>

<!--这里一定要注意,better-scroll滚动的内容区域有它的结构,最外层写ref,这样最保险,它的下面只能有一个孩子,如wrapper,wrapper下面可以有很多同级元素,这些同级元素有个共有的classname,到时需要查找他们,来获取他们各自内容的高度-->

 <div class="lxp_softdetails_content" ref="right">

              <div class="wrapper">

                <!--电控系统列表-->

                <div class="lxp_softdetails_one_2_List" ID="0">

                  <div class="lxp_softdetails_one_2_List_Title">

                    电控系统列表

                  </div>

                  <template v-if="systemList == null">

                    <div class="lxp_softdetails_two">暂无数据</div>

                  </template>

                  <template v-else>

                    <div

                      class="lxp_softdetails_one_2_List_content"

                      v-HTML="systemList"

                    ></div>

                  </template>

                </div>

                <!--功能列表-->

                <div class="lxp_softdetails_one_2_List" ID="1">

                  <div class="lxp_softdetails_one_2_List_Title">功能列表:</div>

                  <template v-if="functionList == null">

                    <div class="lxp_softdetails_two">暂无数据</div>

                  </template>

                  <template v-else>

                    <div

                      class="lxp_softdetails_one_2_List_content"

                      v-HTML="functionList"

                    ></div>

                  </template>

                </div>

</div>

</div>

//导航CSS样式写几个做代表,写了!important的一定有它的作用

 .active1 {

    color: #ffffff !important;

    background-image: url("https://h5.mythinkcar.com/softimg/one.png");

  }

  .bc1 {

    background-image: url("https://h5.mythinkcar.com/softimg/red.png");

  }

  .backgroundNull {

    background-image: url() !important;

  }

//说明一下classname:lxp_softdetails_content的CSS,这是你设定的滚动的高度

.lxp_softdetails_content {

          max-height: 460px;

          overflow: hIDden;

        }

//接下来是script部分

//data部分

leftData: [],//左侧数据

      rightData: [],//右侧数据

      rightBScroll: null,//右侧滑动

      allHeight: [],//承载右侧每一块的高度值

      scrollY: "",//右侧滚动距离

//在methods中调用接口,一定要用到this.$nextTick(),避免接口数据顺序不对导致的无法滚动问题

methods:{

  getPage() {

      return soft({

        lanType: "1002",

        softLanguagename: "MAZDA",

      }).then((res) => {

        console.log(res,res.result);

        this.functionList = res.result.functionList; //功能列表

        this.systemList = res.result.systemList; //系统列表

        this.$nextTick(() => {

          //右侧滚动

//实例化一个对象

          this.rightBScroll = new BScroll(this.$refs.right,{

            click: true,//这个导航点击事件生效的关键

            probeType: 5,//这个的话至少是2

            pullUpLoad: true,//上拉

            pullDownRefresh: true,//下拉

          });

          //统计右侧所有板块高度值,并且放入数组中

          let height = 0;

          this.allHeight.push(height);

          //获取右侧每一块高度

          let uls = this.$refs.right.getElementsByClassname(

            "lxp_softdetails_one_2_List"

          );

          //把DOM对象转换成真正的数组

          Array.from(uls).forEach((v) => {

            height += v.clIEntHeight;//

            console.log(height);

            console.log(v.clIEntHeight);//每个元素内容的高度

            this.allHeight.push(height);

          });

          console.log(this.allHeight);

          //得到右侧滚动的值

          this.rightBScroll.on("scroll",(pos) => {

            this.scrollY = Math.abs(pos.y);

            console.log(this.scrollY);//滚动的高度值

          });

        });

      });

    },

        //左边点击右边滚动

 goScroll(_index,_img,_img1) {

//0代表滚动到顶部,-this.allHeight[_index]代表往上滚动的高度,300代表平滑滚动效果

      this.rightBScroll.scrollTo(0,-this.allHeight[_index],300);

},

},

//接下来是在computed计算属性上判断获取到当前滚动的下标值

computed: {

    currentIndex() {

//当第二个return 返回true时,则返回当前下标,即当前导航所在的下标位置

      return this.allHeight.findindex((item,index) => {

//判断如果当前滚动值>=allHeight数组里的item高度值又<下一个下标的高度值时,则返回true

        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];

      });

    },

  },

总结

以上是编程之家为你收集整理的better-scroll的安装和使用案例全部内容,希望文章能够帮你解决better-scroll的安装和使用案例所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML文章

HTML邮件内容所在上下文或者说所在外部容器(以下简称环境)都是由邮箱服务商决定的,这就要求邮件内容需要在任何一种情况下都要正确显示。
HTML内容类型决定使用的语义标签,在网页中某种类型的内容必定需要某种特定的HTML标签来承载,也就是我们常常提到的根据你的内容语义化HTML结构。
HTML代码在书写的时候应该遵循什么规范?青岛星网今天跟大家分享:HTML的代码格式规范,希望大家都可以写出高质量的HTML代码。
青年码农 一个码农运营的公众号,佛系更新。 139篇原创内容 ...
better-scroll实现左侧导航点击,右侧内容滚动,或者右侧内容滑动,左侧导航联动
一、基本使用需求:有两个页面(A 和 B),当我们在页面A的table列表中点击查看详情按钮,跳转到B页面,在B页面点击返回时,要定位到之前A的列表位置, 不能刷新该页面。在 &lt;router-view /&gt; 的外层包一个 keep-alive 如:&lt;keep-alive include="pageA"&gt; &lt;router-view /&gt;&lt;/keep-alive&gt;其中 include 为要缓存的页面,如果有多个页面可用逗号隔开,pageA为.
WebviewObjectWebview窗口对象,用于操作加载HTML页面的窗口属性id:webview窗口的标识方法:监听addEventListener添加事件监听器wobj.addEventListener( event, listener, capture );参数说明:event: ( WebviewEvent ) 必选 Webview窗口事件类型liste...
1、Android调用H5(JS)1.1、新建assets资源目录并将准备好的HTML页面放入其中(真实项目中HTML页面放在Tomcat中启动)1.2、初始化webView并加载HTML页面 @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) public void initWebView() { //可以加载网页和自定义浏览器 webView = new W
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注