微信小程序开发之滑块视图容器的示例分析

这篇文章将为大家详细讲解有关微信小程序开发之滑块视图容器的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联服务电话:18982081108,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联网页制作领域十多年,包括电动窗帘等多个方面拥有多年的营销推广经验,选择创新互联,为企业保驾护航。

微信小程序 开发之滑块视图容器详解

实现效果图:

微信小程序开发之滑块视图容器的示例分析

实现起来特别简单,看看代码是怎么写的呢:

<swiper class="swiper" indicator-dots="pw_indcatorDots" autoplay="pw_autoPlay" interval="pw_interval" duration="pw_duration">
 <block wx:for="pw_imgUrls" wx:for-index="index">
  <swiper-item>
   <image src="pw_item" class="side-img"></image>
  </swiper-item>
 </block>
</swiper>

这就是布局了,看一下js里面代码:

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
    indcatorDots: true,
    autoPlay: true,
    interval: 5000,
    duration: 500
  },

,swiper有以下一些常用属性:

微信小程序开发之滑块视图容器的示例分析

标记的两个属性暂时不管。

注意:其中只可放置组件,否则会导致未定义的行为。

swiper-item

仅可放置在组件中,宽高自动设置为100%。

关于“微信小程序开发之滑块视图容器的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享文章:微信小程序开发之滑块视图容器的示例分析
转载来源:http://bzwzjz.com/article/gdpsgs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作 成都定制网站建设 成都网站建设 定制级高端网站建设 教育网站设计方案 网站制作公司 重庆手机网站建设 网站制作报价 专业网站建设 重庆网站设计 做网站设计 专业网站设计 成都网站制作 网站建设方案 成都网站建设 成都营销网站制作 成都网站设计公司 成都网站建设 企业网站设计 高端网站设计 成都商城网站制作 手机网站建设