微信小程序开发怎么实现轮播图
本文讲解"微信小程序开发如何实现轮播图",希望能够解决您遇到的有关问题,下面我们来看这篇 "微信小程序开发如何实现轮播图" 文章。
效果图:
1.页面代码
<!--index.wxml--> <view class="container"> <!--轮播图--> <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{lunboData}}"> <swiper-item> <image src="{{item.imgurl}}" class="slide-image" /> </swiper-item> </block> </swiper> </view>
2.配置信息
//index.js Page({ data: { //轮播图配置 autoplay: true, interval: 3000, duration: 1200 }, onLoad: function () { var that = this; var data = { "datas": [ { "id": 1, "imgurl": "../../images/a1.jpg" }, { "id": 2, "imgurl": "../../images/a2.jpg" } ] }; that.setData({ lunboData: data.datas }) } })
3.配置样式
/**index.wxss**/ /*轮播控件*/ .home-swiper { width: 95%; height: 360rpx; } .slide-image { width: 100%; height: 100%; }
关于 "微信小程序开发如何实现轮播图" 就介绍到这。希望大家多多支持编程宝库。
在WPF中怎么实现平滑滚动:本文讲解"在WPF中如何实现平滑滚动",希望能够解决您遇到的有关问题,下面我们来看这篇 "在WPF中如何实现平滑滚动" 文章。WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中 ...