文档章节

Vue组件Better-Scroll使用

 冰shang蚊
发布于 2017/07/27 11:57
字数 836
阅读 126
收藏 1

1.在package.json文件中dependencies增加: "better-scroll":"^0.4.0",版本可以到下面github中查找

可到github中了解详细的better-scroll信息:https://github.com/ustbhuangyi/better-scroll

2.通过npm安装better-scroll,若需要使用则需要在对应文件中加上

import BScroll from 'better-scroll'

若不支持import导入,则请使用下面方式

var BScroll = require('better-scroll')

3.通过一个demo来说明怎么使用better-scroll

html代码块:

<div class="goods">
      <div class="menu-wapper" id="menuWapper">
        <ul>
          <li v-for="(item,index) in goodsList" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMeun(index,$event)">
            <span class="text">{{item.name}}</span>
          </li>
        </ul>
      </div>
     <div class="food-wapper" id="foodWapper">
       <ul>
         <li v-for="item in goodsList" class="food-list food-list-hook">
            <h1 class="title">{{item.name}}</h1>
            <ul>
              <li v-for="food in item.foods" class="food-item">
                <div class="icon">
                    <img :src="food.icon">
                </div>
                <div class="content">
                    <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extar">
                     <span>月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">¥{{food.price}}</span>
                    <span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
                  </div>
                </div>

              </li>
            </ul>
         </li>
       </ul>
     </div>
   </div>

js代码块(左右联动)

import BScroll from 'better-scroll' // 导入
    export default {
        data() {
         return {
             title:"商品列表",
             goodsList:[],// 商品数据列表
             listHeight:[],// 商品高集合
             scrollY:0     // y轴位置
         }
     },computed:{ //计算属性 得到选择x轴上的菜单项 达到左右联动效果
        currentIndex(){
        for(let i=0;i<this.listHeight.length;i++){
            let height1 = this.listHeight[i]; // 高度起点
            let height2 = this.listHeight[i+1]; //高度结束
            // 若是最后一个元素时候 则返回最后高度值
            //  
            if(!height2 || (this.scrollY>=height1&&this.scrollY<height2)){
              return i;
          }
        }
      return 0;
    }
  },created(){
    // 得到商品数据
    this.$http.get("/api/goods").then((res)=>{
      this.goodsList = res.data.data;
      //
      // 通过 $nextTick接口回调 改变dom值 或操作dom值
      this.$nextTick(()=>{
        this._initScroll()
        this._jisuanHeight()
      })
    },(error)=>{});
    },methods:{
        //点击左边菜单,y轴自动滑动到对应列表数据
        selectMeun(index,event){
          // BScroll 自身没有监听点击事件,需要设置 click:true属性,
          // 但pc端是存在点击事件的,若设置了click:true,则pc端触发点击事件,会发生两次点击
          // 所以需要通过事件设置 !event._constructed pc端出现移动端事件
          //  这样无论是在pc端 还是移动端  就只会存在一次点击事件
          if(!event._constructed){
             return;
          }
          // 得到所有 y轴高度 
          let foodList = document.getElementsByClassName("food-list-hook");
          //得到当前点击的元素 
          let elementObj = foodList[index];
          //设置 y轴滑动到对应数据列
          this.foodScroll.scrollToElement(elementObj,300);
     },
       //初始化滑动效果
       _initScroll(){
        // 因为 BScroll 在移动端 没监听点击事件 所有需要在儿设置上点击事件监听
        // BScroll 函数有两个参数 一个是dom对象  一个是参数集
        this.menuScroll = new BScroll(document.getElementById("menuWapper"),{
          click:true
        })
         // 1 滚动的时候会派发scroll事件,会截流。 
         // 2 滚动的时候实时派发scroll事件,不会截流。
         // 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件 
         // 这儿详细说http://www.imooc.com/article/18232
        this.foodScroll = new BScroll(document.getElementById("foodWapper"),{
          probeType:3
        })
        // 得到滑动的y轴数值 pos是位置
        this.foodScroll.on('scroll',(pos)=>{
        //pos.y是小数 ,所以需要进行 Math.round格式化
        //Math.abs 获取绝对值 必须保证是整值
        this.scrollY=Math.abs(Math.round(pos.y));
      });
    },
     // 计算滑动时的高度 对应每个分类数值列 
    _jisuanHeight(){
         let foodList = document.getElementsByClassName("food-list-hook");
         let height=0;
         this.listHeight.push(height);
         for(let i=0;i<foodList.length;i++){
            let item = foodList[i];
            // 通过元素的clientHeight 属性得到当前高度
            height+=item.clientHeight;
           this.listHeight.push(height);
       }
     }
    }
    }

js代码列表滚动

import BScroll from 'better-scroll'
    export default {
        data() {
         return {
             title:"商品列表",
             goodsList:[]
         }
     },created(){
    this.$http.get("/api/goods").then((res)=>{
      this.goodsList = res.data.data;
      this.$nextTick(()=>{
        this._initScroll()
      })
    },(error)=>{});
    },methods:{
         _initScroll(){
           this.menuScroll = new BScroll(document.getElementById("menuWapper"),{})

           this.foodScroll = new BScroll(document.getElementById("foodWapper"),{})
       }
    }
  }

 

© 著作权归作者所有

粉丝 1
博文 43
码字总数 29244
作品 0
海淀
私信 提问
vue 在移动端体验上的优化解决方案

去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading 路由切换...

xiaotianyi
05/17
0
0
【vue/axios/vue-router】制作一个精致的美团项目

一、项目展示: 注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看! 如果大家需要项目源码,请到我的GitHub上下载即可。 二、项目涉及到技术栈...

浪里行舟
2018/05/17
0
0
干货分享:vue2.0做移动端开发用到的相关插件和经验总结

最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSCode插...

wdlhao
2018/09/11
0
0
21、分类详情页之better-scroll实现滚动

前言:本章主要是讲下better-scroll组件库的基本运用; Github:https://github.com/Ewall1106/mall(请选择分支chapter21) 1、什么是better-scroll? better-scroll 是一款重点解决移动端(...

Ewall_
2018/08/16
0
0
Devifish/vue-better-scroller

vue-better-scroller 一款基于 better-scroll.js 为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新 安装 $ npm install vue-better-scroller 使用 在 文件中引入插件并注册 # main.jsimpor...

Devifish
2018/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部