微信小程序|两种基本配置
问题描述
轮播图能够让我们的微信小程序显得更加美观，微信小程序中总是需要很多点击页面的跳转，那我们运用什么样的代码才能够实现呢？
解决方案
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
腾讯云开发者
