moke、动态图片资源打包显示、swiper轮播图、封装组件

moke

使用mockjs来模拟数据接口(其实和ajax差不多,mock其实就是给我们的json数据指定一个url路径去做请求)
    1、准备json数据
    2、安装mockjs
    3、使用mockjs来模拟提供接口地址
    4、在main中引入mockServer.js
    5、在ajax当中修改Ajax中的baseUrl 为 /mock  变为一个新的文件 mockAjax
    mock会拦截我们的ajax请求,不会真正去发送请求。(发送请求是往本地发的,没有往后端发,请求的数据也是本地的)

动态图片资源打包显示 

如果是静态页面,div和img都是存在的,webpack在打包的时候就会把div和img进行打包

并且会根据img的src找到对应的静态资源图片一起打包,所以不会出问题

如果是动态页面,div和img都是根据请求回来的动态数据进行遍历产生的,也就是说webpack在

打包的时候,div和img不存在,因此打包完成后,图片根本没有被打包的指定位置,所以我们需要

自己把需要的静态图片资源,给放到打包后位置,其实就是开发阶段publick当中

实现页面轮播

swiper的用法参考官方网站
    1、安装 5版本
    2、引入js和css   可以查看页面结构是否正常,正常就代表css没问题
    3、书写swiper的结构    早早都已经写完了

    4、实例化swiper实例对象

    注意:swiper必须在页面的数据结构显示完成后创建才会生效


(1)解决swiper影响多个页面的bug

    通过选择器可以指定哪个地方需要,但是不好
    通过ref最好
    

(2)swiper创建的时间应该是在页面列表创建之后才会有效果
    静态页面是没问题的,静态页面不需要等待数据,因此monted完全可以去创建swiper

    现在我们的数据是动态的,monted内部去创建,数据还没更新到界面上,因此无效

静态页面不会出问题,因为new的时候结构本身就形成,

如果是动态页面,结构是根据动态数据渲染的,此时new Swiper一定要等待页面结构完全形成之后再去new

否则new的太早,不生效

直接在mounted去实例化,数据也是在这发请求的,new swiper比数据回来还早,证明结构一定没形成

解决办法:

第一种解决方案:

        加定时器,延迟一段事件再去new,但是体验不好

 第二种解决方案

        放在updated当中,也不行,效率比较低,因为updated是说的页面数据更新完成

       组件当中任何一个数据修改,updated都要去执行,后续会多次重复的去new

第三种解决方案 

    watch监视 + nextTick    
    Vue.nextTick 和 vm.$nextTick 效果一样
    nextTick是在最近的一次更新dom之后会立即调用传入nextTick的回调函数

watch: {
    bannerList: {
      immediate:true,
      handler() {
       // 代表数据回来了,但是直接去实例化,还是不行,因为数据虽然回来了,但是页面还没更新完成
       // 我们既要保证数据回来了,还要保证页面也更新完成了,再去实例化
       // this.$nextTick保证页面更新完成
       // 等待页面最近一次更新完成,执行操作
          
      //  nextTick一般用在,当数据更新后引起页面更新,而页面刚更新完,我们需要写自己的逻辑
      // 此时这些逻辑就写在nextTick的回调当中


         this.$nextTick(() => {
           new Swiper(this.$refs.bannerSwiper, {
             // direction: 'vertical', // 垂直切换选项
             loop: true, // 循环模式选项
            autoplay:true,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
             },

           // 如果需要前进后退按钮
            navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            // scrollbar: {
           //   el: '.swiper-scrollbar',
            // },
          })
       })
       }
    }
  },

 封装组件

定义可复用的轮播组件
    banner是在watch当中去创建swiper 因为组件创建的时候数据不一定更新
    floor是在mounted当中去创建swiper,因为内部组件创建的时候,数据已经存在了

    1、同一个组件  有好几个地方js代码是一样的                 封装函数   
    2、有好几个地方js代码是一样的                 封装模块(vue中还能封装混入(混合))         
    3、有好几个地方 html css  js都是一样的        封装组件 (html,css,js的混合体,混合件)


 抽离组件注意事项:
        1、html css  js写成一样,去封装组件
        2、封装好组件之后要考虑动态数据
        3、动态数据需要在使用的时候,由父组件进行传递

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值