First install better-scroll
npm i better-scroll -S
Goods page template
<template>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="item in goods" class="menu-item">
<span class="text border-1px">
<span v-show=">0" class="icon" :class="classMap[]"></span>{{}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper" ref="foodsWrapper">
<ul>
<li v-for="item in goods" >
<h1 class="title">{{}}</h1>
<ul>
<li v-for="food in " class="food-item border-1px">
<div class="icon">
<img :src="" alt="" width="57" height="57">
</div>
<div class="content">
<h2 class="name">{{}}</h2>
<p class="desc">{{}}</p>
<div class="extra">
<span class="food-number">Monthly sales{{}}share</span>
<span>Positive review rate{{}}%</span>
</div>
<div class="price">
<span class="nowPrice">￥{{}}</span>
<span class="oldPrice">￥{{}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
js
<script type="text/ecmascript-6">
/* eslint-disable*/
import BScroll from 'better-scroll'
export default{
props:{
seller:{
type:Object
}
},
data(){
return{
goods:[]
}
},
created(){
=['decrease', 'discount', 'special', 'invoice', 'guarantee']
this.$('/api/goods').then((res)=>{
=;
this.$nextTick(()=>{
this._initScroll();
})
(this.$)
})
},
methods:{
_initScroll(){
=new BScroll(this.$,{});
=new BScroll(this.$,{});
}
}
}
</script>
First use ref to bind the event, and register it with $.refs in vue
In the hook function create, use vue-resource to request data and call the method asynchronously
this.$nextTick(()=>{
this._initScroll();
}
Registration method
_initScroll(){
=new BScroll(this.$,{});
=new BScroll(this.$,{});
}
Better-scroll usage
Let's first look at the common html structure of better-scroll:
<div class="wrapper"> <ul class="content"> <li></li> <li></li> <li></li> <li></li> </ul> </div>
When the height of the content does not exceed the height of the parent container, it cannot be scrolled. Once it exceeds the height of the parent container, we can scroll the content area. This is the scrolling principle of better-scroll.
import BScroll from 'better-scroll'
let wrapper = ('.wrapper')
let scroll = new BScroll(wrapper, {})
better-scroll exposes a BScroll class to the outside world. We only need new instances of a class to initialize. The first parameter is the DOM object of our wrapper, and the second is some configuration parameters.
The initialization timing of better-scroll is important because when it is initialized, it calculates the height and width of the parent and child elements to determine whether it can scroll vertically and horizontally. Therefore, when we initialize it, we must ensure that the contents of the parent and child elements have been rendered correctly. If there is no way to slide, it means that the timing of initialization is wrong.
Ele.me handled this way:
mounted() {
this.$nextTick(() => {
= new Bscroll(this.$, {}) })
}
this.$nextTick()This method is used to use this method when the data is modified and then use it to callback to get the updated dom and then render it
If not belowthis.$nextTick()Callback in the method, if the data is changed and then the scroll axis will be calculated, it will cause an error.
Pull-up refresh function
<div class="wrapper" ref="wrapper">
<ul class="content" ref="content">
<li v-for="(item,key) in detail" :key="key" v-if=" > 0">
<Row type="flex" justify="start" align="middle">
<Col :span="8" class="detail-item">
<span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span>
</Col>
<Col :span="8" class="detail-item">
<span>{{}}</span>
</Col>
<Col :span="8" class="detail-item">
<span>￥ {{item.partner_profit | number2}}</span>
</Col>
</Row>
</li>
<li v-if="!scrollFinish">
<Row type="flex" justify="center" align="middle">
<Col :span="6" v-if="loadingText">
<p>{{loadingText}}</p>
</Col>
<Col :span="2" v-else>
<Spin size="large"></Spin>
</Col>
</Row>
</li>
</ul>
</div>
mounted() {
// Set the height of the wrapper this.$ = ("app").offsetHeight - ("scroll").offsetTop + "px";
// The content height of better-scroll cannot be scrolled if it is not greater than wrapper height. The problem here is that when the height of a page of data is not enough to srapper height, even if n pages exist, it cannot be pulled down. // You need to set the content's min-height greater than the wrapper height this.$ = this.$ + 1 + "px";
this._initScroll();
();
// Set the scroll height // = ("app").offsetHeight - ("scroll").offsetTop ;
},
methods:{
_initScroll() {
= new BScroll(this.$, {
probeType: 3,
click:true,
pullUpLoad: { // It's loaded on the configuration threshold: -80 //Load when pulling up 80px },
mouseWheel: { // The PC end can also slide speed: 20,
invert: false
},
useTransition:false, // Prevent iphone WeChat from sliding and stuttering });
// Pull up to load data ('pullingUp',()=>{
= false;
// Prevent a pull-up from triggering two events in a single pull-up. Do not call the following finish method in the request data completion event of ajax, otherwise it is possible to trigger two pull-up events in a single pull-up event. ();
// Load data ();
});
}
Summarize
The above is a detailed explanation of the usage example code of vue-better-scroll introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!