Angular中使用better-scroll

lentoo 发布于2019-08-05 12:39 / 2114人阅读

摘要：的使用由于需要在一个固定的的高度做无限滚动，本来的也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库，配合的。的和的插槽很像，里面一些不确定的内容可以通过投影进去。

better-scroll的使用

由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content。angular的ng-content和vue的插槽很像，里面一些不确定的内容可以通过ng-content投影进去。

安装better-scroll

1: npm install better-scroll --save

2: 安装types npm install better-scroll @types/better-scroll --save

3：在angular-cli里面引入

listscroll组件的编写

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

html部分：

ng-content就是要投影进来的内容

component.ts部分

1: import引入 BScroll

2：在OnInit这个钩子里面来初始化，由于OnInit的时候，ngFor还没执行完毕，所以就加了一个定时器来延迟。

import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";
declare let BScroll;
@Component({
  selector: "app-listscroll",
  templateUrl: "./listscroll.component.html",
  styleUrls: ["./listscroll.component.css"]
})
export class ListscrollComponent implements OnInit {

  @ViewChild("scroll") scrollEl: ElementRef;
  @Input()
  private height: number;

  public scroll;
  constructor() { }

  ngOnInit() {
  
    // 设置高度
    this.scrollEl.nativeElement.style.height = `${this.height}px`; 
    
    // 初始化
    setTimeout(() => {
      this.scroll = new BScroll(this.scrollEl.nativeElement, {click: true});
    }, 20);
  }

}

在其他组件里面使用listscroll组件


  
      第{{num}}个

总结

这样better-scroll简单的使用就完成，当然better-scroll还有很多功能，可以依赖它做上拉和下拉的加载，做轮播图等等，具体可参考官方的文档。

混合云服务器托管 angular使用webrtc 中使用 java中使用标记 java中使用注册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56996.html

基于better-scroll的vue滚动组件

摘要：让用户可以滚动页面。事件中拿到想要的后浏览器已经隐藏地址栏和工具栏，放开插件滚动。发现派发的方法在父组件中监听后获取位置参数的效果不太好必须要手指贴着滑动才可以这个设置为可以实时派发滚动事件和位置参数其他坑点待发现欢迎大佬一起交流写在前面由于最近一个移动端项目中许多地方有滚动需求, 横向,纵向的都有,所以就基于better-scroll封装了一个通用的滚动组件,期间也踩了一些坑,有...

xiaotianyi 2019-08-23 18:09 评论0 收藏0
better-scroll笔记

摘要：当设置为会派发一个事件，我们会给派发的参数加一个私有属性，值为。但是自定义的事件会阻止一些原生组件的行为。安装npm install better-scroll --save引入import BScroll from better-scroll基础better-scroll支持多参数配置，可以在初始化的时候传入第二个参数let scroll = new BScroll(.wrappe...

xcc3641 2019-08-26 10:36 评论0 收藏0
Vue+Better-Scroll 实现多Tab上拉加载更多实例

摘要：本场是讲一个基于实现多切换上拉加载更多的实例，像这种多切换加载更多的场景，不管在端还是移动端都还挺常见的，比如商城类，订单中心等。通过学习本项目，你也可以做出多切换上拉加载更多的效果，而不必到处找别人的例子。本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例，像这种多 Tab 切换加载更多的场景，不管在 PC 端还是移动端都还挺常...

wuyangchun 2019-08-26 13:59 评论0 收藏0
Vue+Better-Scroll 实现多Tab上拉加载更多实例

摘要：本场是讲一个基于实现多切换上拉加载更多的实例，像这种多切换加载更多的场景，不管在端还是移动端都还挺常见的，比如商城类，订单中心等。通过学习本项目，你也可以做出多切换上拉加载更多的效果，而不必到处找别人的例子。本场 Chat 是讲一个基于 Vue+Better-Scroll 实现多 Tab 切换上拉加载更多的实例，像这种多 Tab 切换加载更多的场景，不管在 PC 端还是移动端都还挺常...

habren 2019-08-05 17:31 评论0 收藏0
vue 在移动端体验上的优化解决方案

摘要：去年年底自己搭了一个在移动端的开发框架，感觉体验不是很好。路由懒加载首页终于写完了，以上这些就是我在移动端体验优化的实战。去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-sc...

godlong_X 2019-05-22 11:25 评论0 收藏0