The home page is an app, a very common requirement in small programs. As a common requirement, how to efficiently complete the realization of this requirement is extremely critical. So how do we implement our own homepage from 0 to 1, please see this article.
actual effect
The layout of the waterfall flow is realized, and at the same time, the network request of the corresponding api of Douban is involved, and then the data of the corresponding item is obtained
WXML layout
Since most layouts are relatively consistent, I adopted a componentized design to reduce code redundancy. The following is the xml layout of the home page
<!--index.wxml-->
<searchbar isnavigator="{
{true}}"></searchbar>
<!-- 滑动布局 -->
<indexmodule title = "影院热映" items="{
{movies}}"></indexmodule>
<indexmodule title = "近期热门剧情" items="{
{tvhot}}"></indexmodule>
<indexmodule title = "近期热门综艺" items="{
{shows}}"></indexmodule>
<indexmodule title = "畅销图书" items="{
{books}}"></indexmodule>
<indexmodule title = "热门单曲榜" items="{
{music}}"></indexmodule>
Json
Componentization, then we need to add in json, the dependency on components
{
"usingComponents": {
"searchbar":"/components/searchbar/searchbar",
"star":"/components/star/star",
"indexmodule":"/components/indexmodule/indexmodule"
}
}indexmodule is the waterfall component of the homepage, star is the component of scoring stars, and searchbar is the component of the search box
Please refer to the specific implementation, not much detailed description here
https://blog.csdn.net/m0_37218227/article/details/106984839
https://blog.csdn.net/m0_37218227/article/details/107023453
Network request
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
/**
* 网络请求
*/
// 电影
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=7',
// data:{
// count:7
// }
success: function(res) {
var movies = res.data.subject_collection_items;
that.setData({
movies: movies
});
}
});
//电视剧
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items?count=7',
success: function(res) {
var tvhot = res.data.subject_collection_items;
that.setData({
tvhot: tvhot
});
}
});
//综艺
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items?count=7',
success: function(res) {
var shows = res.data.subject_collection_items;
that.setData({
shows: shows
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})Follow up wx.request to request the network to obtain the data of the corresponding module, then this page is basically ready
Finally, take a look at the wxss file of the waterfall flow component, you can see the layout style of the specific waterfall flow control
.module-group{
padding: 40rpx;
background-color: #fff;
}
.module-group .module-top{
font-size: 36rpx;
display: flex;
justify-content: space-between;
}
.module-top .module-title{
font-weight: bold;
color: #494949;
}
.module-top .module-more{
font-size: 28rpx;
color: #41be57;
}
.module-scroll-view{
margin-top: 40rpx;
width: 100%;
height: 400rpx;
white-space: nowrap;
}
.item-navigator{
width: 200rpx;
margin-right: 20rpx;
display: inline-block;
}
.item-navigator .item-group{
width: 100%;
}
.item-group .thumbnail-group{
width: 100%;
height: 284rpx;
}
.thumbnail-group .thumbnail{
width: 100%;
height: 100%;
}
.item-group .item-title{
font-size: 28rpx;
text-align: center;
margin-top: 20rpx;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 20rpx;
}
I hope the friends I like can like and collect, support and make progress together