zoukankan      html  css  js  c++  java
  • mpvue微信小程序怎么写轮播图,和官方微信代码的差别

    目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作。

    那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了:

    官方代码:

    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>

    mpvue微信代码:

    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
        <block v-for="(item, index) in movies" :index="index" :key="key">
            <swiper-item>
                <image :src="item.url" class="slide-image" mode="aspectFill"/>
            </swiper-item>
        </block>
    </swiper>

    注意我们改动的几个地方:

    1.所有双括号是要去掉的,否则报错

    2.wx:for要改成v-for(后面一定要有:index和:key不然报错)

    3.src的绑定要加冒号

    4.最好加个:key="key",不加不会报错,但是有警告,看着不舒服。

    原文链接:https://blog.csdn.net/weixin_39818813/article/details/80636875

  • 相关阅读:
    锁屏设计文档
    用 jquery 解决 浏览器 兼容问题
    mysql 查询语句
    技术相关
    android Rom 制作2
    android Rom 制作
    UI设计
    jquery 表单验证
    cent os数据库安装
    mysql jdbc 驱动 下载地址官网
  • 原文地址:https://www.cnblogs.com/Webzhoushifa/p/9557300.html
Copyright © 2011-2022 走看看