La página de inicio es una aplicación, un requisito muy común en programas pequeños.Como requisito común, cómo completar de manera eficiente la realización de este requisito es extremadamente crítico. Entonces, ¿cómo implementamos nuestra propia página de inicio de 0 a 1? Consulte este artículo.
efecto real
Se realiza el diseño del flujo de cascada, y al mismo tiempo, se involucra la solicitud de red de la api correspondiente de Douban, y luego se obtienen los datos del elemento correspondiente.
Diseño WXML
Dado que la mayoría de los diseños son relativamente consistentes, adopté un diseño en componentes para reducir la redundancia de código. El siguiente es el diseño xml de la página de inicio
<!--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
Componentización, luego debemos agregar json, la dependencia de los componentes
{
"usingComponents": {
"searchbar":"/components/searchbar/searchbar",
"star":"/components/star/star",
"indexmodule":"/components/indexmodule/indexmodule"
}
}indexmodule es el componente de cascada de la página de inicio, star es el componente para puntuar estrellas y la barra de búsqueda es el componente del cuadro de búsqueda
Consulte la implementación específica, no una descripción muy detallada aquí
https://blog.csdn.net/m0_37218227/article/details/106984839
https://blog.csdn.net/m0_37218227/article/details/107023453
Solicitud de red
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() {
}
})Seguimiento wx.request para solicitar a la red que obtenga los datos del módulo correspondiente, entonces esta página está básicamente lista
Finalmente, eche un vistazo al archivo wxss del componente de flujo de cascada, puede ver el estilo de diseño del control de flujo de cascada específico
.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;
}
Espero que a los amigos que me gustan les guste y recopilen, apoyen y progresen juntos