问题描述
轮播图能够让我们的微信小程序显得更加美观，微信小程序中总是需要很多点击页面的跳转，那我们运用什么样的代码才能够实现呢？
解决方案
1 轮播图
WXML代码：
|
<swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}" duration="{{duration}}" circular="true"> <blockwx:for="{{imgUrls}}"> <swiper-item> <navigator url="{{item.link}}" hover-class="navigator-hover"> <image src="{{item.url}}"width="500" height="500"/> </navigator> </swiper-item> </block> </swiper> |
Js中date内代码：
|
data: { imgUrls: [ { link: '/pages/liar/liar', url: '/pages/images/1.jpg' }, { link: '/pages/logs/logs', url: '/pages/images/2.jpg' }, { link: '/pages/index/index', url: '/pages/images/3.jpg' } ] |
效果图：
图 1轮播图代码效果图
2 点击页面的跳转
WXML代码：
|
<navigator url="/pages/lijiao/lijiao"> <view> <text>下一页</text> </view> </navigator> |
WXSS配置代码：
|
.a{ border-radius: 50rpx; width: 250rpx; height: 250rpx; margin-top: 60rpx; margin-left: 40rpx; float: left |
效果图：
图 2跳转前界面
图 3跳转后界面
结语
轮播图在首页设置更加美观，更加吸引人。跳转界面设置一定要设置清楚你所跳转的界面，可在文件夹中设置一个pages同级的文件夹，以便于区分你的微信小程序的一二级界面。
END
实习编辑 | 王文星
责 编 | 李 娇
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
