微信小程序轮播图实现


2020年4月2日 22:40 阅读 760 评论 0 None

微信小程序中轮播图应该是最常见的,所以今天就说下轮播图的实现

WXML

<!--轮播图start--> 
<swiper class="slides" autoplay="{{slides.length > 1}}" indicator-dots="{{slides.length > 1}}" indicator-color="#bcc0c9" indicator-active-color="#3a4861"> 
    <swiper-item wx:for="{{slides}}" wx:key="id"> 
        <navigator wx:if="{{item.path}}" url="{{item.path}}"> 
            <image src="{{item.img_url}}" mode="aspectFill" /> 
        </navigator> 
        <image wx:else src="{{item.img_url}}" mode="aspectFill" /> 
    </swiper-item> 
</swiper> 
<!--轮播图end--> 

WXSS

.slides { 
    height: 380rpx; 
} 

.slides navigator, 
.slides image { 
    width: 100%; 
    height: 100%; 
} 

JavaScript

onLoad: function(options) { 
    var that = this; 
    wx.request({ 
        url: 'http://api.xxx.com', 
        method: 'GET', 
        success: function(res) { 
            console.log(res.data.data) 
            that.setData({ 
                slides: res.data.data 
            }) 
        } 
    }) 
}, 

这里使用调用api来实现动态轮播图,如果不需要,就只需要初始化一个slides即可

最后修改于2020年4月2日 22:40
©允许规范转载

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:https://www.yyqblog.com/article/23.html

微信
支付宝
登录后即可进行评论/回复
标签云
当前分类推荐
2020-03-29
0评论
2020-03-28
0评论
友情链接
博客开发期间不交换友链哦~