脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序图片轮播组件

微信小程序图片轮播组件gallery slider使用方法详解

 更新时间：2018年01月31日 15:23:56   作者：Rattenking  
这篇文章主要为大家详细介绍了微信小程序图片轮播组件gallery slider的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序图片轮播组件的具体代码，供大家参考，具体内容如下

先上效果图：

微信小程序图片轮播动态图

wxml

<scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore">
 <view class="swiper">
  <swiper class="swiper-box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
      indicator-color="#fff" indicator-active-color="red">
    <block wx:for-items="{{banner_url}}" wx:key="item.id">
      <navigator url="../blogList/blogList">
       <swiper-item>
        <block wx:if="{{item}}">
         <image class="imgw" src="{{item.url}}" mode="aspectFill"/>
        </block>
        <block wx:else>
         <image src="../../images/default_pic.png" mode="aspectFill"></image>
        </block>
       </swiper-item>
      </navigator>
    </block>
  </swiper>
 </view>
</scroll-view>

wxss

.imgw{width:100%;}

js

/**
 *页面的初始数据
 */
data: {
 banner_url: data.bannerList(),
 open: false,
 indicatorDots: true,//是否显示面板指示点
 autoplay: true,//是否开启自动切换
 interval: 3000,//自动切换时间间隔
 duration: 500//滑动动画时长
}

最终效果：

这里写图片描述

总结：

1. scroll-view组件的作用是可以触发触摸滑动
2. swiper组件的作用是制作图片自动切换，形成轮播
3. navigator组件的作用是给每个图片添加链接
主要是scroll-view和swiper两个组件制作成可滑动的轮播组件。

DEMO下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js获取事件源及触发该事件的对象

    js获取事件源及触发该事件的对象

    如何获取事件源及触发该事件的对象，方法有很多，js中可以通过event来实现，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-10-10
  • 详解vscode中console.log的两种快速写法

    详解vscode中console.log的两种快速写法

    这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • 分享两段简单的JS代码防止SQL注入

    分享两段简单的JS代码防止SQL注入

    下面小编就为大家分享两段简单的JS代码防止SQL注入。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • javascript实现鼠标放上后下边对应内容变换的效果

    javascript实现鼠标放上后下边对应内容变换的效果

    这篇文章主要介绍了javascript鼠标放上后下边对应内容变换的方法,实例分析了javascript实现tab切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS二叉树的简单实现方法示例

    JS二叉树的简单实现方法示例

    这篇文章主要介绍了JS二叉树的简单实现方法,结合具体实例形式分析了基于javascript定义二叉树及二叉树节点的遍历、查找、添加、删除及运算相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 浅谈redux, koa, express 中间件实现对比解析

    浅谈redux, koa, express 中间件实现对比解析

    这篇文章主要介绍了浅谈redux, koa, express 中间件实现对比解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript中的垃圾回收与内存泄漏示例详解

    JavaScript中的垃圾回收与内存泄漏示例详解

    这篇文章主要给大家介绍了关于JavaScript中垃圾回收与内存泄漏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 微信js-sdk上传与下载图片接口用法示例

    微信js-sdk上传与下载图片接口用法示例

    这篇文章主要介绍了微信js-sdk上传与下载图片接口用法,结合实例形式分析了基于上传图片接口(uploadImage)和下载图片接口(downloadImage)针对图片操作的相关技巧,需要的朋友可以参考下
    2016-10-10
  • 关于JS中的作用域中的问题思考分享

    关于JS中的作用域中的问题思考分享

    这篇文章主要介绍了关于JS中的作用域中的问题思考分享，scope和 closure是 javascript中两个非常关键的概念，前者JS用多了还比较好理解而且容易体会到，而 closure就不一样了。这玩意是真的很容易迷糊,需要的朋友可以参考下
    2022-04-04
  • 使用纯javascript实现放大镜效果

    使用纯javascript实现放大镜效果

    本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。
    2015-03-03

最新评论