better-scroll的基本使用
基本 scroll Better 使用
2023-09-11 14:22:18 时间
封装组件:
<template> <div ref="rootRef"> <slot></slot> </div> </template> <script> import useScroll from './use-scroll' import { ref } from 'vue' export default { name: 'scroll', props: { click: { type: Boolean, default: true }, probeType: { type: Number, default: 0 } }, emits: ['scroll'], setup(props, { emit }) { const rootRef = ref(null) const scroll = useScroll(rootRef, props, emit) return { rootRef, scroll } } } </script>
封装组件用的js:
import BScroll from '@better-scroll/core' import ObserveDOM from '@better-scroll/observe-dom' import { onMounted, onUnmounted, onActivated, onDeactivated, ref } from 'vue' BScroll.use(ObserveDOM) export default function useScroll(wrapperRef, options, emit) { const scroll = ref(null) onMounted(() => { const scrollVal = scroll.value = new BScroll(wrapperRef.value, { observeDOM: true, ...options }) if (options.probeType > 0) { scrollVal.on('scroll', (pos) => { emit('scroll', pos) }) } }) onUnmounted(() => { scroll.value.destroy() }) onActivated(() => { scroll.value.enable() scroll.value.refresh() }) onDeactivated(() => { scroll.value.disable() }) return scroll }
组件使用:
<scroll class="recommend-content"> <div> <div class="slider-wrapper"> <div class="slider-content"> <slider v-if="sliders.length" :sliders="sliders"></slider> </div> </div> <div class="recommend-list"> <h1 class="list-title" v-show="!loading">热门歌单推荐</h1> <ul> <li v-for="item in albums" class="item" :key="item.id" @click="selectItem(item)" > <div class="icon"> <img width="60" height="60" v-lazy="item.pic"> </div> <div class="text"> <h2 class="name"> {{ item.username }} </h2> <p class="title"> {{item.title}} </p> </div> </li> </ul> </div> </div> </scroll>
相关文章
- Mali GPU OpenGL ES 应用性能优化--基本方法
- pymongo 增删改查基本操作汇总(基本)
- 5 -- Hibernate的基本用法 --2 Hibernate入门
- VS-Qt-OSG-CMake基本项目框架
- kubernetes多网卡方案之Multus CNI部署和基本使用
- 前端基础 -JQuery之 基本过滤选择器
- 面向机器学习的自然语言标注3.1 语料库分析中的基本概率知识
- mysql连表查询基本增删改查
- atom 在Ubuntu 18.04 上安装及基本使用
- markdown基本语法
- 《JavaScript面向对象编程指南》——2.3 基本数据类型
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.2 表格基本属性
- Go语言基本语法 (上)
- python django 基本测试 及调试 201812
- Anaconda 的基本使用
- H3C BGP基本配置
- java.lang.Math中的基本方法
- async与await是什么?async和await基本用法
- Java MyBatis-Plus 基本使用