better-scroll is encapsulated as a component scroll.vue:
< template >
< div ref= "wrapper" >
<slot></slot>
< / div >
< / template >
< script >
import BScroll from "better-scroll"
export default {
props: {
/**
* 1 scroll
* 2 scroll
* 3 scrollswipescroll
*/
probeType: {
type: Number,
default: 1
},
/**
* click
*/
click: {
type: Boolean,
default: true
},
/**
*
*/
scrollX: {
type: Boolean,
default: false
},
/**
*
*/
listenScroll: {
type: Boolean,
default: false
},
/**
*
*/
data: {
type: Array,
default: null
},
/**
*
*/
pullup: {
type: Boolean,
default: false
},
/**
*
*/
pulldown: {
type: Boolean,
default: false
},
/**
*
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* scroll
*/
refreshDelay: {
type: Number,
default: 20
}
},
mounted () {
setTimeout(() => {
this._initScroll
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new Bscroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX
})
//
if (this.listenScroll) {
this.scroll.on("scroll", pos => {
this.$emit("scroll", pos)
})
}
//
if (this.pullup) {
this.scroll.on("scrollEnd", () => {
//
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
this.$emit("scrollToEnd")
}
})
}
//
if (this.beforeScroll) {
this.scroll.on("beforeScrollStart", () => {
this.$emit("beforeScroll")
})
}
},
enable() {
this.scroll && this.scroll.enable()
},
disable() {
this.scroll && this.scroll.disable()
},
refresh() {
this.scroll && this.scroll.refresh()
},
scrollTo() {
// better-scrollscrollTo
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
// better-scrollscrollToElement
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
< / script >
< style scoped >
< / style >
use scroll: in singgerlists.vue
< template >
< scroll: data= "data" class= "wrapper" ref= "listview" >
<ul class="content">
<li v-for="group in data" ref="listGroup" class="list-group">
<h4 class="list-group-title">{{group.title}}</h4>
<ul>
<li class="list-group-item" v-for="item in group.items">
<img class="avatar" v-lazy=""https://y.gtimg.cn/music/photo_new/T001R300x300M000" + item.id.id + ".jpg?max_age=259200"" alt="">
<span class="name">{{item.id.name}}</span>
</li>
</ul>
</li>
</ul>
< / scroll >
< / template >
< script >
import Scroll from "base/scroll/scroll"
import {getData} from".. /.. / common/dom"
export default {
props: {
data: {
type: Array,
default: []
}
},
methods: {},
components: {
Scroll
}
}
< / script >
< style >
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.list-group {
padding-bottom: 30px;
}
.list-group-title {
height: 30px;
line-height: 30px;
padding-left: 20px;
}
.list-group-item {
}
.name {
margin-left: 20px;
}
.list-shortcut {
position: absolute;
zmuri index: 30;
right: 0;
top: 50%;
transform: translateY (- 50%);
width: 20px;
padding: 20px 0;
border-radius: 10px;
text-align: center;
font-family: Helvetica;
}
.item {
padding: 3px;
line-height: 1;
.list-fixed {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.fixed-title {
height: 30px;
line-height: 30px;
padding-left: 20px;
background: red;
}
.loading-container {
position: absolute;
width: 100%;
top: 50%;
transform: translateY (- 50%);
}
< / style >
introduce singerlists as a component in singer.vue:
<template>
<div class="singer" ref="singer">
<singer-lists :data="singerList" ref="list"></singer-lists>
<router-view></router-view>
</div>
</template>
<script>
import Axios from "axios"
import Singer from "../../common/singer"
import SingerLists from "../../base/singerlist/singerlists"
const HOT_NAME = ""
const HOT_SINGER_LEN = 10
export default {
data() {
return {
singerList: [],
pulldown: true
}
},
computed: {
shortcutList() {
return this.singerList.map(item => {
return item.title.substr(0, 1)
})
}
},
methods: {
getSingerData() {
var url = "/api/v8/fcg-bin/v8.fcg"
const commonParams = {
g_tk: 5381,
inCharset: "utf-8",
outCharset: "utf-8",
notice: 0,
format: "jsonp"
}
const data = Object.assign({}, commonParams, {
channel: "singer",
page: "list",
key: "all_all_all",
pagesize: 100,
pagenum: 1,
hostUin: 0,
needNewCode: 0,
platform: "yqq"
})
return Axios.get(url, {
headers: {
referer: "https://c.y.qq.com",
host: "c.y.qq.com"
},
params: data
}).then(response => {
var rusl = JSON.parse(response.request.response)
this.singerList = this._shortList(rusl.data.list)
console.log(this.singerList)
})
},
_shortList(list) {
let map = {
hot: {
title: HOT_NAME,
items: []
}
}
list.forEach((item, index) => {
if (index < HOT_SINGER_LEN) {
map.hot.items.push(
new Singer({
name: item.Fsinger_name,
id: item.Fsinger_mid
})
)
}
const key = item.Findex
if (!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push(
new Singer({
name: item.Fsinger_name,
id: item.Fsinger_mid
})
)
})
console.log(map)
// map
let hot = []
let ret = []
for (let key in map) {
let val = map[key]
if (val.title.match(/[a-zA-Z]/)) {
ret.push(val)
} else if (val.title === HOT_NAME) {
hot.push(val)
}
}
ret.sort((a, b) => {
return a.title.charCodeAt(0) - b.title.charCodeAt(0)
})
return hot.concat(ret)
}
this.$refs.listview.scrollToElement(this.$refs.listItem[anchorIndex], 0)
},
created() {
this.getSingerData()
},
components: {
// Scroll,
SingerLists
}
}
</script>
<style>
.singer {
position: fixed;
width: 100%;
top: 60px;
bottom: 0;
}
effect is shown in figure
:
this is a successful introduction. It could still be scrolled yesterday. I don"t know what has been changed. I can"t scroll now