今天给大家带来微信小程序图片九宫格布局样式制作设计教程,主要适合首页需要九宫格布局小程序页面,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<view class="container">
<view class="title">
<image class="huace" src="../../src/huace.png" background-size="contain"></image>
</view>
<view class="items">
<view class="item" wx:key wx:for="{{list}}" bindtap="bindViewTap" data-id="{{item.id}}">
<image class="item-cover" src="{{item.pic_url}}" background-size="contain"></image>
</view>
</view>
<view>
<image class="copyright" src="../../src/copyright.png" background-size="contain"></image>
</view>
</view>
|
二、wxss样式页面代码如下:
.item{
width:33%;
float:left;
margin:30rpx 0 60rpx 0;
}
.item text{
width:100%;
display:block;
text-align:center;
font-size:28rpx;
}
.item image{
width:180rpx;
height:186rpx;
display:block;
margin:0 auto;
}
.huace{
width:750rpx;
height:118rpx;
margin:0 auto;
}
|
三、js页面代码如下:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
list: [],
userInfo: {}
},
//事件处理函数
bindViewTap: function(e) {
var id = e.currentTarget.dataset.id;
console.log(id);
wx.navigateTo({
url: '../scene/scene?id='+id
})
},
getSceneLists:function(){
var that = this;
wx.request({
url: "https://qcloud.bmy.com.cn/api/voices/classify",
success: function(data){
console.log(data.data);
that.setData({
list:data.data
})
},
fail: function () {
wx.showLoading({
title: '数据加载错误,请刷新再试!'
})
}
});
},
onLoad: function () {
var that = this;
this.getSceneLists();
wx.showLoading({
title: '加载中'
})
},
onReady: function () {
setTimeout(function () {
wx.hideLoading();
}, 500)
}
})
|