制作⼩程序实现⾖瓣榜单的使⽤
这是界⾯设计：
app.josn:
{
"pages": [
"pages/hello/hello",
"pages/logs/logs",
"pages/index/index"
selectediconpath什么意思],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#000",
"navigationBarTitleText":"⾖瓣电影",
"navigationBarTextStyle":"white"
},
"tabBar":{
"list": [
{
"pagePath":"pages/hello/hello",
"text":"榜单",
"iconPath":"/images/002.jpg",
"selectedIconPath":"/images/002.jpg"
},
{
"pagePath":"pages/logs/logs",
"text":"⽇志",
"iconPath":"/images/002.jpg",
"selectedIconPath":"/images/002.jpg"
},
{
"pagePath":"pages/index/index",
"text":"个⼈",
"iconPath":"/images/002.jpg",
"selectedIconPath":"/images/002.jpg"
}
]
},
"style":"v2",
"sitemapLocation":"sitemap.json"
}
榜单界⾯的实现：
js:
// pages/hello/hello.js
Page({
/
**
* 页⾯的初始数据
*/
data:{
movie:[]
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options){
//this代表⼩程序page对象，在回调函数中，this不代表配置对象
this.setData({
movie:[{},{}]
})
var that = this;//声明⼀个对象（that）指向page对象
var that = this;//声明⼀个对象（that）指向page对象
url: 'douban.uieee/v2/movie/top250', //仅为⽰例，并⾮真实的接⼝地址      data:{
start: 0,
count: 100
},
header:{
'content-type':'application/xml' // 默认值
},
success(res){
console.log(res);
that.setData({
movie:res.data.subjects
})
}
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function (){
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function (){
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function (){
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function (){
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function (){
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function (){
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function (){
}
}
})
wxml:
<!--pages/hello/hello.wxml-->
<view class="movie" wx:for="{{movie}}">
<view class="left">
<image class="cover" src="{{item.images.small}}"></image>  </view>
<view class="middle">
<view class="t1">{{item.title}}</view>
<view class="t2">{{iginal_title}}</view>
<view class="t3">
<text wx:for="{{item.directors}}">{{item.name}}</text>
</view>
</view>
<view class="right">
<view class="right">{{item.rating.average}}</view>
</view>
</view>
wxss:
/* pages/hello/hello.wxss */
/*id选择器>class选择器>标签选择器*/
.
left{
width: 100px;
height: 100px;
/**margin: auto；适合于图⽚**/
justify-content: center;/**主轴⽅向的对齐⽅式**/ align-items: center;/**侧轴⽅向的对齐⽅式**/ }
.movie
{
display: flex;/**设置movie为弹性盒⼦**/
}
/**主轴：默认是⽔平⽅向
侧轴：跟主轴垂直的⽅向**/
/
*id*/
.middle{
width:calc(100% - 160px);/*减去左右值的和*/ height: 100px;
line-height: 32px;
white-space: nowrap;/*不换⾏*/
overflow:hidden;/*溢出部分不显⽰*/
text-overflow: ellipsis;/*省略号*/
}
.right{
width: 60px;
height: 100px;
color: red;
font-weight: bold;
text-align: center;
line-height: 100px;/*⾏⾼*/
}
.cover{
width: 80px;
height: 80px;
margin-top: 10px;
margin-left: 10px;
}
.
t1{
font-size: 16px;/*默认16像素*/
font-weight: bold;
}
.t2{
font-size: 10px;/*默认16像素*/
color: #ccc;
}
.t3{
font-size: 14px;/*默认16像素*/
}
下⾯是效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。