E企盈营销工具技术服务商 热线:4006-838-530

中江县E企盈小程序微信小程序Banner实现

1.小程序实现Banner图微信小程序实现Banner相对于Android实现Banner来说非常便捷的,如图:2.在.js中定义数据源如下:Page({  /**   * 页面的初始数据   */  data: {    // Banner数据    images:[      "http://img.zcool.cn/community/014056564bd8596ac7251c94eb5559.jpg",      "http://img.zcool.cn/community/01e03b58047e96a84a0e282b09e8fc.jpg",      "http://pic.90sjimg.com/ba开通卷发器小程序电话:4006-838-530ck_pic/00/00/69/40/d678a42886e0232aaea0d6e69e9b1945.jpg",      "http://img.zcool.cn/community/0132dd55800bc700000059ffbe83e9.jpg@1280w_1l_2o_100sh.jpg",      "http://img.zcool.cn/community/0154755a2df102a80120ba3828b5af.jpg@1280w_1l_2o_100sh.jpg",      "http://pic.90sjimg.com/back_pic/00/00/69/40/bf4f8e2ab7e05dc3c7cc2a7f7e9c2fe7.jpg",      "http://img.zcool.cn/community/01a2a2594943d3a8012193a328e0fd.jpg@1280w_1l_2o_100sh.jpg"    ],    // 是否显示面板指示点    indicatorDots: true,    // 滑动方向是否为纵向    vertical: false,    // 自动切换    autoplay: true,    // 采用衔接滑动    circular: true,    // 自动切换时间间隔2s    interval: 2000,    // 滑动动画时长0.5s    duration: 500,    // 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值    previousMargin: 0,    // 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值    nextMargin: 0  },}

3.在.wxss编写组件样式如下:.swiper-item-images{  width: 100%;  height: 300rpx;}

4.在.wxml中具体使用<swiper indicator-dots="{{indicatorDots}}"       开通休闲裤小程序电话:4006-838-530  autoplay="{{autoplay}}"         circular="{{circular}}"         vertical="{{vertical}}"         interval="{{interval}}"         duration="{{duration}}"         previous-margin="{{previousMargin}}px"         next-margin="{{nextMargin}}px">        <block wx:for='{{images}}'开通复古眼镜小程序电话:4006-838-530 wx:key='index'>      <swiper-item>        <image src='{{item}}' mode='aspectFill' class='swiper-item-images'/>      </swiper-item>    </block></swiper>

微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 中江县E企盈小程序微信小程序Banner实现
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏