Vue部分插件的使用
2020-06-29 04:50
603 查看
swiper
vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
npm install --save vue-awesome-swiper
**常见问题1:滚动条划不动(划一下弹回去,非静止)
原因,页面内容还没有加载出来,滚动条的高度设置为了未加载资源时容器的高度,所以导致slide的高度不够滑动。解决办法就是,资源加载完之后更新滚动条。
举例:recommends.vue是有需要加载的内容。 利用swiper给该组件做了一个滚动条。
bash src/mall/home/recommends.vue
此文件下,recommends加载完之后,抛出loaded时间,并带出数据this.recommends
this.$emit('loaded', this.recommends);
bash src/mall/home/index.vue
然后在调用recommend组件的页面下。
给滚动条传一个数据,默认是空数组,当@loaded捕获到事件,执行事件,将this.recommends更新,即滚动条的data更新。再利用watch监听这个数据变化,发生变化的时候,更新滚动条。
<me-scroll :data="recommends"> <home-slider></home-slider> <home-nav></home-nav> <!-- 接收事件,当recommends加载完之后,更新滚动条--> <home-recommend @loaded="getRecommend"></home-recommend> </me-scroll>
home-recommend是home的子组件,可以看作是子组件上接收到事件,然后就可以向父组件传值。(子组件向父组件传值)
data() { return { recommends: [], } }, methods: { updateScroll() { }, // @loaded捕获事件的时候,顺便获取到了参数 getRecommend(recommends) { this.recommends = recommends; }
bash src\base\scroll\index.vue
最后在滑动条组件里更新滑动条
props:{ data: { type: [Array, Object], } }, watch: { data(newValue,oldValue){ // watch默认会传入old和new value,用不到,可以不接收。 // watch用法可以参照另一篇 this.updata(); } }, methods: { updata(){ // 官方api下有swiper.update() 更新滚动条 // 但是这个swiper并非我们组件里的swiper,而是 new Swiper()实例化之后的对象才具有这个方法。 console.log(this.$refs.swiper); // this.$refs.swiper 获取到的VueComponent,是一个组件实例,里面包含一个swiperInstance,这个就是一个Swiper实例 this.$refs.swiper && this.$refs.swiper.swiperInstance.update(); }, }
其中,ref是是设置在swiper组件上
<swiper :options="swiperOptions" ref="swiper"></swiper>
lazyload
npm install --save vue-lazyload
main.js文件中
// 设置后全局可以使用lazyLoad import VueLazyload from 'vue-lazyload'; Vue.use(VueLazyload, { preLoad: 1, // 其实是个小数,1表示页面内容完全暴露的时候加载,一点几表示还没划到图片位置就开始加载,零点几表示滑到图片位置,过一会儿才开始加载 error: require('assets/img/error.png'), loading: require('assets/img/loading.gif'), attempt: 1, })
使用方法:
<img class="recommend-img" :src="item.baseinfo.picUrlNew">
替换成
<img class="recommend-img" v-lazy="item.baseinfo.picUrlNew">
axios
npm install --save axios
获取数据的方式。详情可以查看
【vue学习】axios 各种获取数据方式对比
fastclick
npm install –-save babel-polyfill fastclick
移动端点击之后会有300ms的延迟,fastclick可以解决这个问题
babel-polyfill
npm install --save-dev babel-polyfill
原生的babel只会将ES6的语法(如箭头函数)转化成低版本的语法,但是对于ES6的API只会原封不动的保留,同样无法在低版本设备适应。 babel-polyfill就是可以在全局范围内添加API。
相关文章推荐
- Sublime Text3 中的部分实用插件功能及使用
- selenium部分功能(上传文件、swf插件)无法自动化时可使用的方法
- VUE图片懒加载-vue lazyload插件的简单使用
- vue-resource和vue-async-data两个插件的使用
- vue移动端裁剪图片结合插件Cropper的使用
- Vue的百度地图插件尝试使用
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- vue.js插件使用(01) vue-resource
- vue-resource插件使用
- selenium部分功能(上传文件、swf插件)无法自动化时可使用的方法
- vue移动端裁剪图片结合插件Cropper的使用实例代码
- 浅谈vue中使用图片懒加载vue-lazyload插件详细指南
- Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
- 如何在Vue中使用less插件
- Vue2.0插件之三:使用vue-axios插件
- vue插件tab选项卡使用小结
- Vue 2.0 使用图片懒加载插件
- 使用WebStrom开发设置ReactNative关于JSX中的XML部分的智能提示插件的安装办法
- Vue表单验证插件Vue Validator使用方法详解
- Vue.js devtool插件安装后无法使用的解决办法