本文给大家带来的是微信小程序书城周推和月推荐表样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--hotPush.wxml-->
<view class="hotpush-container">
<block wx:for="{{['month','week']}}">
<view class="header">
<image class="header-img" src="/images/hot.png"></image>
<text class="header-text">{{titles[item]}}</text>
</view>
<block wx:for="{{hotPush[item]}}" wx:for-item="data">
<view class="hot-container" catchtap="toDetail" data-book="{{data}}">
<text class="name-text">{{index+1}}. {{data.name}}</text>
<text class="author-text">{{data.author}}</text>
</view>
</block>
</block>
</view>
|
二、wxss样式文件代码如下：
/* hotPush.wxss */
.hotpush-container {
display: flex;
flex-direction: column;
}
.header {
display: flex;
flex-direction: row;
height: 80rpx;
background-color: #eee;
align-items: center;
}
.header-img {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
.header-text {
font-size: 36rpx;
color: #444;
margin-left: 10rpx;
}
.hot-container {
width: 100%;
height: 70rpx;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1rpx solid #eee;
justify-content: space-between;
}
.name-text {
margin-left: 20rpx;
font-size: 30rpx;
color: #666;
}
.author-text {
font-size: 24rpx;
color: lightgray;
margin-right: 20rpx;
}
|
三、js页面代码如下：
// hotPush.js
Page({
/**
* 页面的初始数据
*/
data: {
hotPush: {},
titles: { 'month': '月推榜', 'week': '周推榜' }
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.requestData();
},
requestData: function () {
var that = this;
wx.request({
url: 'http://www.kindlepush.com/m/weekAndMonth',
success: function (res) {
that.setData({
hotPush: res.data,
});
},
fail: function (err) {
}
})
},
toDetail: function (event) {
var book = event.currentTarget.dataset.book;
wx.navigateTo({
url: '/pages/bookDetail/bookDetail?book=' + JSON.stringify(book),
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
