zoukankan      html  css  js  c++  java
  • 微信小程序——轮播图实现

    小程序的轮播图,也就是他其中的一个控件可以算是直接上代码:

    这是WXML 页面 代码:

      <view class='carousel_div'>
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
          <block wx:for="{{commodity_info.LogoPaths}}" wx:for-index="index" wx:key="">
    
            <swiper-item>
              <image src="{{LogoIp}}{{item}}" class="slide-image" mode='aspectFill' />
            </swiper-item>
          </block>
        </swiper>
      </view>

    当然还有一些参数:indicator-dots 是否显示指视点,ndicator-color知识点的颜色 ,indicator-active-color被选中的知识点颜色,autoplay自动播放,interval时隔,duration滑动时长。

    接下来是wxss 的样式(可以自己调一下):

    /* 轮播图样式 */
    
    .carousel_div {
      position: relative;
      width: 100%;
      height: 40%;
    }
    
    .swiper {
      position: absolute;
      height: 100%;
      width: 100%;
    }
    
    .swiper image {
      height: 100%;
      width: 100%;
    }

    然后 js 页中,就在data中 随便写个字典就可以  key:option  value:图片地址。。 就可以

    (本人页面使用,需要可以自己拿走,详细属性可以查看小程序API    https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html)

  • 相关阅读:
    mySQL安装的时候一直卡在starting server这里解决办法
    编译安装nginx
    用户访问网站原理及流程
    mysql备份及恢复
    sed
    mysql 基础
    nginx优化
    mysql 三种日志
    tr
    date
  • 原文地址:https://www.cnblogs.com/nnqwbc/p/8126262.html
Copyright © 2011-2022 走看看