效果
js
/**
* 页面的初始数据
*/
data: {
/*类目列表*/
sortRows: [
[{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "美食",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "猫眼电影",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "休闲娱乐",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "外卖",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
}
],
[{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "KTV",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "丽人",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "火车票",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
},
{
image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
title: "更多",
jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
}
]
]
},
//link.js
data: {
linkUrl: ''
},
onLoad: function(options) {
var that = this;
that.setData({
linkUrl: options.linkUrl
});
},
wxml
<!-- 6/8/10个icon模板 -->
<view class='sorts-wrap'>
<view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
<view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
<navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
<image src='{{sortItem.image}}'></image>
<text>{{sortItem.title}}</text>
</navigator>
</view>
</view>
</view>
//link.wxml
<web-view src='{{linkUrl}}' />
wxss
/* 8个icon */
.sorts-wrap {
font-size: 28rpx;
text-align: center;
margin: 5px 0;
}
.sorts-wrap .flex-wrap {
margin-top: 20rpx;
}
.sorts-wrap navigator image {
width: 80rpx;
height: 80rpx;
}
.sorts-wrap navigator text {
display: block;
}
/*flex布局*/
.flex-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.flex-wrap .flex-item {
flex: 1;
}
转载请注明出处!