BetterScroll

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件（目前已经支持PC） 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1、移动端 我们通常采用三段式进行布局的 例如 <div class="container"> <header></header><main></main><fotter></fotter> </div> 假如我们利用弹性盒布局的话 给container 开盒子后我们一般给头部和尾部固定的高度 给main这个中间盒子一个flex:1;和overflow:auto ，让其达到可以自由滚动效果 但是如果我们给main这层中间盒子加载了better-scroll这款插件后 我们需要把auto改成hidden 毕竟给上固定高度百分百(当然这里可以省略) 可是有的人就会发现有时滚动效果没有作用对吧 嘿、此时第一个注意问题就来了 加载better-scroll的元素只能有一个直属子元素 也就是 <main><div class="content">剩余布局盒子写在这里</div></main>这种形式 并且content这层盒子不能给固定高度 当content的高度大于外层main这个盒子后better-scroll就会生效 2、然后第二点就是今天的重头戏

基本用法都在这，用来回忆的 1.正常使用不封装 因为要等待配置的css加载完才能生效，所以不能使用created < template > < ! -- 只对 wrapper下对第一个元素标签内生效，其他自动忽略，当然也可以不写 content -- > < div class = "wrapper" > < ul class = "content" > < li > 1 < / li > < li > 2 < / li > ... ... < / ul > < / div > < / template > < script > import BetterScroll from 'better-scroll' // 引用，先 npm install better-scroll -S export default { created ( ) { return { bs : null } } , mounted ( ) { this . bs = new BetterScroll ( '.wrapper' , { // 如果使用默认（前两条属性），可以不用赋值，直接 new movable : true , zoom : true , probeType : 3 , // 2移动距离（手指离开滑动不算） 3移动加滑动距离 pullUpLoad : true , // 上拉加载更多 }

前言： 上一篇 项目总结介绍了页面骨架的开发、header组件的开发，这一篇主要梳理：商品组件开发、商品详情页实现。 项目github地址： https://github.com/66Web/ljq_eleme ，欢迎Star。 goods 一、商品组件开发 App.vue 主组件传seller对象给每个路由： < router-view :seller ="seller" ></ router-view > 两栏布局-flex布局手机屏幕自适应 设计：无高度滚动条，高度超过视口高度就会隐藏 < div class ="goods" > < div class ="menu-wrapper" ></ div > < div class ="foods-wrapper" ></ div > </ div > .goods display: flex position: absolute top: 174px bottom: 46px width: 100% overflow: hidden .menu-wrapper flex: 0 0 80px width: 80px background: #f3f5f7 .foods-wrapper flex: 1 左侧布局-菜单列表 需求：文字标题可能单行，也可能多行，但都要在列表项中垂直居中 小技巧：使用列表项 display:table

开发企业级移动端音乐App，拿下Vue.js高级知识点 一、声明 本项目来自于 黄轶 老师的慕课网教程 Vue 2.0高级实战 开发移动端音乐 WebAPP ,目的在学习交流，如果有冒犯相关的权益，还望告知。 二、简述 由于本人也是第一次写文章，才薄智浅，博众一笑。关于某课上的音乐项目《Chicken Music》本人也是十分感兴趣，这篇文章主要目的是在于让更多的同学学习到深层次的前端知识（有点等于没说~哈哈哈）。本人是十分尊重知识产权的，但是日益增长的物质文化需要（支付不起价格）同落后的社会生产之间（工资低）的矛盾。本人怀着共同学习，共同进步的原则会为大家持续更新，数据接口一旦崩溃、修改、超时，会为大家在第一时间修改。 三、效果 四、页面代码块 由于代码量太多只能展示部分关键代码，还望海涵。 五、项目演示地址 六、项目帮助 此项目代码量巨大一篇文章，三言两语，远远不能表述清楚。如有需要本人可在闲暇之余提供力所能及的帮助 WeChat:13751817115 。也可以通过私人电邮联系我: 13751817115@163.com 。 项目运用了: 1.Vue.js 的高级应用 - Vuex、嵌套路由、slot、mixin、code spliting 等技术 2.庞大的组件库 - 13个基础组件+15个业务组件 3.MVVM框架：Vue.js 4.状态管理：Vuex 5.前端路由

本文是根据编写仿饿了么webapp时所总结的 1、当页面使用滚动组件时，在移动端触发点击事件，需要单独设置 <template> <div ref="demo" class="demo"> <div class="demo-content"> <span @click="addClick">内容高度超过页面高度就会滚动，此处的 .demo 要设置 overflow:hidden</span> </div> </div> </template> <script> import BScroll from 'better-scroll'; export default { mounted(){ }, methods:{ _initScroll: function(){ this.scroll = new BScroll(this.$refs.demo,{ click: true //设置点击事件为true，为false则不能触发点击事件 }); //也可以设置pageScroll ，可以区分多个页面滚动 this.pageScroll = new BScroll(this.$refs.demo,{ click: true //设置点击事件为true，为false则不能触发点击事件 }); }, //但导致pc端和移动端点击不一致，pc端触发两次点击事件，通过以下设置保持一致。

前言： 接着 上一篇项目总结 ，这一篇 是学习过程记录的最后一篇，这里会梳理：评论组件、商家组件、优化、打包、相关资料链接。项目github地址： https://github.com/66Web/ljq_eleme ，欢迎Star。 ratings seller 一、评论组件-ratings 评论组件主要分为三块 评分信息-overview 评论选择-ratingselect 评论详细信息 评分信息部分 左侧评分 布局Dom < div class ="ratings-content" > < div class ="overview" > < div class ="overview-left" > < h1 class ="score" > {{seller.score}} </ h1 > < div class ="title" > 综合评分 </ div > < div class ="rank" > 高于周边商家{{seller.rankRate}}% </ div > </ div > < div class ="overview-right" > ..... </ div > </ div > < split ></ split > CSS样式 .overview display flex padding 18px 0 18px 18px .overview

:musical_keyboard: 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。 :yum: 项目演示地址： 移动端音乐 WebApp ，或者可以扫描二维码访问： 电脑在 Chrome 调试模式下食用效果更佳，开启调试模式的手机模式后，如果不能滚动，刷新一下页面即可 :satisfied: 源码地址： vue-music-webapp ，欢迎 star 和 fork 哦~ 如果你觉得我做的不错的话，我就厚着脸皮求个 star ⭐️ 哈， star 是对我最大的鼓励（老脸一红） 预览 图片虽然压缩过了，但是几张加载一起还是有 3MB 左右，所以请耐心等待一下啦:joy:。感觉不错的可以去上面 :point_up:的地址体验一下呦~ 推荐、排行榜、歌手 歌单详情、个人中心 播放器、播放列表 搜索页面 开发目的 通过学习开发一个 Vue 全家桶项目，让自己更熟练的使用 Vue 全家桶、模块化开发、ES6 等等知识，提高自己的技术能力。 技术栈 前端 Vue ：用于构建用户界面的 MVVM 框架 vue-router ：为单页面应用提供的路由系统，使用了 Lazy Loading

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 better-scroll 的滚动原理 不少同学可能用过 better-scroll，我收到反馈最多的问题是： 我的 better-scroll 初始化了， 但是没法滚动。 不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理： 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。 那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构： < div class = "wrapper" > < ul class = "content" > < li >... </ li > < li >... </ li > ... </ ul > </ div > 为了更加直观，我们再来看一张图： 绿色部分为 wrapper，也就是父容器，它会有固定的高度

前端下拉刷新，上拉加载的实现一直都有很多坑，今天入以下 better-scroll 的坑，先附上 better-scroll 的官方文档，如果要深入使用还是得看文档 查看链接 第一步 先看下better-scroll实现时的dom结构,如下代码 1 < div class ="scroller" ref ="scroller" > 2 < div class ="scroll-list" > 3 < div class ="scroll-item" ></ div > 4 < div class ="scroll-item" ></ div > 5 < div class ="scroll-item" ></ div > 6 < div class ="scroll-item" ></ div > 7 < p class ="loading" >{{ loadingText}} </ p > 8 </ div > 9 </ div > 如上 类 .scroller 就是初始化 better-scroll 时作用的 dom （容器）, 这个元素需要有个 固定的高度 ，然后需要设置 overflow 的样式，经尝试设置 overflow: hidden; 或者 overflow-y: auto; 都可以 类 .scroll-list 就是要滚动的容器,这个盒子不需要给多余的样式

最近在用vue2.0做微信公众号相关的前端开发，经过这次开发实践，现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理，希望和大家共同交流...... cssrem：一个CSS值转REM的VSCode插件； lib-flexible：移动端弹性布局适配解决方案； vue-touch：移动端相关点击，滑动，拖动，多点触控等事件封装； vee-validate：适用于vue项目中表单验证插件； better-scroll ：可能是目前最好用的移动端滚动插件; fastclick：解决移动端click 300ms延迟 vConsole：手机前端开发调试利器 webpack之proxyTable设置跨域 vue组件之间通信（父向子通信，子向父通信，非父子通信）方法示例； ref特性的使用； vue中setTimeout,setInterval的使用; 监听鼠标滚动事件,实现头部悬浮效果(this.$nextTick); new FormData()上传图像； vue,@click="event()"，添加()与不添加()的区别； 1、cssrem 介绍： 一个CSS值转REM的VSCode插件。我们在做移动端开发时，为了网页适配，一般会将像素单位px转换为rem.在用vscode开发时，我们可以安装cssrem这个插件。 插件效果如下： 默认配置： “cssrem