angular7中使用better-scroll实现滚动功能

拼搏现实的明天。 2021-10-19 09:42 477阅读 0赞

#### 地址 ####

https://www.npmjs.com/package/better-scroll  
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api-specific.html

#### 安装 ####

npm install better-scroll --save
    npm install better-scroll @types/better-scroll --save

#### 使用要求 ####

根据官方的文档可以看出，better-scroll对dom的结构是有要求的，最外层的wrapper那一层是需要固定高度的，里面那一层content是根据内容的高度来撑起的。

<div class="scroll" #scroll>
     	 <ng-content></ng-content>
    </div>

#### 引入 BScroll并初始化 ####

import BScroll from 'better-scroll';
    
    export class VideoReportComponent implements OnInit {
    
        @ViewChild('scroll') scrollEl: ElementRef;
    
        public scroll;
    
        constructor() {}
    
        ngOnInit() {
            // 设置高度
            this.scrollEl.nativeElement.style.height = `${600}px`;
    
            // 初始化
            setTimeout(() => {
                this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});
            }, 20);
        }
    
    }

#### 效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211018/9cedc3aff84d45ab829df232e579b062.png

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular7中使用ckplayer插件实现各大浏览器视频播放功能

用原生的video属性，虽然主流浏览器都可以播放，但是在IE中会出现错误：（提示：视频类型不受支持或者文件路径无效）下载ckplayer.js文件可以在git...

女爷i/ 2024年04月17日 15:11/ 0 赞/ 81 阅读

相关 Angular 滚动条 angular-nice-bar

angular-nice-bar 详细介绍一个轻量级的Angular scrollbar. Install bower install angular-ni

╰半橙微兮°/ 2022年05月20日 09:47/ 0 赞/ 202 阅读

相关移动端滚动插件 BetterScroll

BetterScroll 详细介绍 [BetterScroll][] 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用

落日映苍穹つ/ 2022年05月18日 09:41/ 0 赞/ 346 阅读

相关 angular7中常见细节使用

Angular中修改第三方组件的样式 ::ng-deep img width 100% height 100% b

ゝ一世哀愁。/ 2022年02月27日 10:12/ 0 赞/ 321 阅读

相关 angular7中使用插件美化滚动条样式

依赖插件 jQuery niceScroll 安装 `cnpm i jquery --save` `cnpm install jquery

「爱情、让人受尽委屈。」/ 2022年02月24日 13:24/ 0 赞/ 356 阅读

相关 angular7中实现图片上传、图片压缩、图片裁剪功能

file-upload.service.ts import { Injectable } from '@angular/core'; import { Htt

喜欢ヅ旅行/ 2022年01月28日 00:15/ 0 赞/ 786 阅读

相关 angular7中文件下载功能(图片、文档)

在angular中实现文件下载功能，暂不支持pdf格式，因为pdf会直接预览 H5的下载方式： <!-- <td class="underline"><a [

傷城~/ 2022年01月22日 14:21/ 0 赞/ 860 阅读

相关 vue使用betterscroll解决滚动

本来的不加定位，不设置超出隐藏的时候，显示的是右侧滚动条，但是手机端的话，最好还是不用滚动条，所以用这个第三方来处理 1.执行命令安装:npm install bett

素颜马尾好姑娘i/ 2021年12月21日 07:49/ 0 赞/ 435 阅读

相关 angular7中使用better-scroll实现滚动功能

地址 https://www.npmjs.com/package/better-scroll https://ustbhuangyi.github.io/better

拼搏现实的明天。/ 2021年10月19日 09:42/ 0 赞/ 478 阅读

相关 angular7中使用echarts

安装依赖建议使用cnpm 安装，直接使用npm可能会报错 cnpm install echarts --save cnpm install ngx-e

心已赠人/ 2021年10月18日 15:28/ 0 赞/ 565 阅读