先上效果图:
HTML:
<view class='nav-main'>
<view class='nav-block'>
<swiper indicator-dots="true" indicator-active-color="rgba(0,175,190,.8)" style='height: 400rpx;'>
<block wx:for="{{icons}}" wx:for-item="i">
<swiper-item>
<view class='nav-m'>
<view class='nav' wx:for="{{i}}" wx:for-item="j">
<image src="{{j.icon}}"></image>
<text>{{j.title}}</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
CSS:
.nav-block{
width:100%;
font-size:28rpx;
margin:20rpx auto;
background: #fff
}
.nav-m{
width:100%;
}
.nav{
width:25%;
margin:16rpx auto;
text-align: center;
display: inline-block;
}
.nav image{
display:inline-block;
width:48px;
height:48px;
}
.nav text{
display:block;
font-size: 28rpx;
color: #212121;
}
JS:
data: {
icons: [
[
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "景点门票" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png", title: "广州必游" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png", title: "动植物园" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png", title: "游乐场" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/89/55083b0f1951f302.png", title: "两江夜游" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png", title: "水上乐园" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png", title: "一日游" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/90/59a2f523ee2f9202.png", title: "农家度假" }
],
[
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png", title: "玩转长隆" },
{ icon: "http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png", title: "全部玩乐" }
]
],
}