// index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
// 视频1
wx.request({
data:{
key:"5d2991ac5e635ff313322cbdfa6d7d5f",
type:"hot_video",
size:10
},
url: 'http://apis.juhe.cn/fapig/douyin/billboard?key='+this.key+'&type='+this.type+'&size='+this.size,
success:function (res) {
var datainfo = res.data.result;
// console.log(res)
console.log(datainfo);
that.setData({
datainfo:datainfo
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--index.wxml-->
<navigation-bar extclass="{{true}}"></navigation-bar>
<line title="电影" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>
<line title="娱乐" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>
<line title="电视剧" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>
index.json
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"line":"/components/line/line"
}
}
index.wxss
/**index.wxss**/
/*电影 更多*/
.dy-line {
width: 100%;
height: 70rpx;
margin-top: 30rpx;
}
.dy-line-1 {
display: flex;
}
.dy-title{
flex: 1;
padding-left: 10px;
padding-right: 20px;
box-sizing: border-box;
}
.gd-title {
padding-right: 10px;
}
/*滚动图片*/
.gdtp {
margin-top: 30rpx;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
}
.gdtp-tp image {
width: 240rpx;
height: 310rpx;
}
.gdtp-tp {
display: inline-block;
margin-right: 10rpx;
height: 400rpx;
width: 240rpx;
}
.gdtp-xx image {
width: 40rpx;
height: 40rpx;
}
/* 行1 */
.dy-line1{
margin-top: 500rpx;
}
/* 行2 */
.dy-line2{
margin-top: 100rpx;
}
以下是: 首页模块代码重构，并组件化应用。
<!--components/line.wxml-->
<view class="dy-line">
<view class="dy-line-1">
<view class="dy-title">{{title}}</view>
<navigator class="gd-title" url="">更多</navigator>
</view>
<scroll-view class="gdtp" scroll-x="{{true}}">
<view wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}" class="gdtp-tp">
<image src="https://image11.m1905.cn/uploadfile/2017/0510/thumb_1_300_406_20170510101856524637.jpg" mode="" />
<view class="gdtp-mc">{{item.author}}</view>
<view class="gdtp-xx">
<image wx:for="{{[1,2,3]}}" src="/images/rate_light.png" mode="" />
<image src="/images/rate_half.png" mode="" />
<image src="/images/rate_gray.png" mode="" />
</view>
</view>
</scroll-view>
</view>
// components/line.js
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: ""
},
moreurl: {
type: String,
value: ""
},
items: {
type: Array,
value: []
},
type: {
type: String,
value: ""
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
/* components/line.wxss */
/*电影 更多*/
.dy-line {
width: 100%;
height: 70rpx;
margin-top: 30rpx;
margin-bottom: 500rpx;
}
.dy-line-1 {
display: flex;
}
.dy-title{
flex: 1;
padding-left: 10px;
padding-right: 20px;
box-sizing: border-box;
}
.gd-title {
padding-right: 10px;
}
/*滚动图片*/
.gdtp {
margin-top: 30rpx;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
}
.gdtp-tp image {
width: 240rpx;
height: 310rpx;
}
.gdtp-tp {
display: inline-block;
margin-right: 10rpx;
height: 400rpx;
width: 240rpx;
}
.gdtp-xx image {
width: 40rpx;
height: 40rpx;
}
/* 行1 */
.dy-line1{
margin-top: 500rpx;
}
/* 行2 */
.dy-line2{
margin-top: 100rpx;
}
line.json
{
"component": true,
"usingComponents": {}
}