效果展示
Demo代码
wxml
<view class="box">
<view class="boxitem" wx:key='index' wx:for="{{functions}}" bindtap="tofunction" data-url="{{item.url}}">
<view class="boxitem_top">
<image src="{{item.icon}}"></image>
</view>
<view class="boxitem_bottom">
<text>{{item.name}}</text>
</view>
</view>
</view>
js
/ pages/functions/functions.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
h: app.globalData.h,
functions: [{
icon: "/images/x1.png",
name: "农学院",
url: "../xueyuan/xueyuan"
},
{
icon: "/images/x2.png",
name: "农市大集",
url: "../shiji/shiji"
},
{
icon: "/images/x3.png",
name: "AR扫病害",
url: "../ar/ar"
},
{
icon: "/images/x4.png",
name: "交流论坛",
url: "../luntan/luntan"
},
{
icon: "/images/x5.png",
name: "鲜蔬配送",
url: "../peisong/peisong"
},
{
icon: "/images/x6.png",
name: "休闲农业",
url: "../xiuxian/xiuxian"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 跳转页面
tofunction: function (e) {
// wx.navigateTo({
// url: e.currentTarget.dataset.url,
// })
}
})
wxss
page {
background-image: url(https://wx3.sinaimg.cn/mw690/006cV2kkgy1gcz9iabu19j30yi22oabf.jpg);
background-size: cover;
}
.box {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: 50% auto;
}
.boxitem {
width: 180rpx;
height: 180rpx;
margin: 25rpx;
background-color: white;
.
.
.
.
.
.
完整源码获取途径
见文末引言
