vue.js学习之better-scroll封装的轮播图初始化失败

问题一:slider组件初始化失败

原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载

解决方法:

在slider组件中监听页面传过来的图片数据,如果图片更新了,再次出发页面slider的初始化

1:首先在slider.vue的prop中注册一个变量

imgData: {
type: Array,
default: null
}

2:监听

watch: {
imgData() {
setTimeout(() => {
this._setSliderWidth()
this._initDots()
this._initSlider()
}, 20)
}
}

3:父组件中传数据到imgData中

<slider :imgData="recommends">

  

vue.js学习之better-scroll封装的轮播图初始化失败的更多相关文章

  1. 封装bt轮播图淡入淡出效果样式

    <!--BT轮播图-->    <div data-ride="carousel" class="carousel slide carousel_inn ...

  2. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  3. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  4. js原生选项卡(包含无缝滚动轮播图)一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  5. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  6. vue手把手教你实现走马灯商品左右轮播图

    <template> <div> <div class="back_add"> <div class="threeImg&quo ...

  7. vue项目中,使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  8. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. Matlab 编程入门(一):编程基础

    上学期学了一些matlab的知识,这学期再用时竟然发现已经忘得差不多了(┬_┬) 于是决定重新开始并将它们记录下来,也方便自己以后查漏补缺! M文件编程 脚本文件 matlab有自己的命令行窗口,对于 ...

  2. 简单的反编译class文件并重新编译的方法

    在没有.java源码的情况下,如果想修改一个.class文件.可以通过以下步骤实现: 修改前的class文件: 一.反编译.class文件成.java文件. 1.可以使用Java Decompiler ...

  3. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  4. 能够还原jQuery1.8的toggle的功能的插件

    下面这个jQuery插件能够还原1.8的toggle的功能,如果你需要,可以直接把下面这段代码拷贝到你的jQuery里面,然后跟平时一样使用toggle的功能即可. //toggle plugin f ...

  5. day04-decorator

    # Author: 刘佳赐-Isabelle # Email: jiaci.liu@gmail.com ''' 练习题: 1.整理装饰器的形成过程,背诵装饰器的固定格式 2.编写装饰器,在每次执行被装 ...

  6. error: command 'aarch64-linux-gnu-gcc' failed with exit status 1

    使用jetson tx2安装tensorpack时报错: error: command 'aarch64-linux-gnu-gcc' failed with exit status 1 改正: 如果 ...

  7. 如何理解 UL94HB , UL94-V0 , UL94-V1 , UL94-V2

    塑料阻燃等级由HB,V-2,V-1向V-0逐级递增: UL94V0,V1,V2是不同的阻燃等级,其等级不同,耐燃的测试方法亦不同,测试判定的标准也不同. V0的测试方法是将测试物倾斜45度,用酒精灯点 ...

  8. 1 多任务fork Unix/Linux/Mac

    # 注意,fork函数,只在Unix/Linux/Mac上运行,windows不可以 1.如下程序,来模拟“唱歌跳舞”这件事情 #-*- coding:utf-8 -*- import time de ...

  9. SIFT 特征点提取算法

    SIFT特征点相对于ORB计算速度较慢,在没有GPU加速情况下,无法满足视觉里程计的实时性要求,或者无法运行在手机平台上,但是效果更好,精度更高.在应用时可以择优选取,了解其本质原理的动机是为了自己使 ...

  10. ORA-15032、ORA-15071错误处理

    遇到一下错误 ERROR at line 1: ORA-15032: not all alterations performed ORA-15071: ASM disk "NOCR_0002 ...