本文给大家带来的是微信小程序书城三栏图书图片列表页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--bookMall.wxml-->
<import src="mall/mall-template.wxml" />
<view class="container">
<view class="header-container" catchtap="toBookList" data-categoryId="-1" data-categoryName="全部">
<image class="header-img" src="/images/store/allBook_316x95_@2x.png" ></image>
<text class="header-title">全部图书</text>
</view>
<view class="main-container">
<block wx:for="{{categories}}">
<view catchtap="toBookList" data-categoryId="{{index+1}}" data-categoryName="{{item.name}}">
<template is="mall" data="{{...item}}"></template>
</view>
</block>
</view>
</view>
|
二、wxss样式文件代码如下:
/* bookMall.wxss */
@import "mall/mall-template.wxss";
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 0rpx;
background-color: #fff;
}
.header-container {
height: 200rpx;
width: 94%;
position: relative;
margin-top: 20rpx;
}
.header-img {
width: 100%;
height: 100%;
}
.header-title {
font-size: 40rpx;
color: #fff;
position: absolute;
top: 50%;
left: 40%;
}
.main-container {
display: flex;
flex-direction: row;
margin: 20rpx auto;
justify-content: space-around;
flex-wrap: wrap;
}
|
三、js页面代码如下:
// bookMall.js
Page({
/**
* 页面的初始数据
*/
data: {
categories: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.requestData();
},
requestData: function () {
var that = this;
wx.request({
url: 'http://www.kindlepush.com/m/categorys',
success: function (res) {
console.log(res.data)
var categories=[];
for (var i = 1; i < res.data.length; i++){
var category={};
category["name"]=res.data[i].name;
var imgUrl = "/images/store/"+i +"_112x112_@3x.png";
category["imgUrl"]=imgUrl;
categories.push(category);
};
// res.data.splice(0, 1);
that.setData({
categories: categories
})
},
fail: function (err) {
console.log(err);
}
});
},
toBookList: function(event){
var categoryId = event.currentTarget.dataset.categoryid;
var categoryName = event.currentTarget.dataset.categoryname;
wx.navigateTo({
url: '/pages/allBook/allBook?categoryId=' + categoryId + '&categoryName=' + categoryName,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|