本文给大家带来的是微信小程序橙色影片详情评分页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!-- detail.wxml -->
<view class='detail'>
<view style='width:100%;height:200px;background-image: url("{{detail.img}}");background-repeat: no-repeat;background-size: 400%;position:absolute;z-index:-1;opacity:1;filter: blur(21px);'>
</view>
<view class="top">
<view class='clearfix'>
<view class='left pull-left'>
<image src='{{detail.img}}' />
</view>
<view class='right pull-left'>
<view>
<title style='color:#fff;font-size:16px;'>{{detail.nm}}</title>
</view>
<view>
<text style='color:orange;font-size:12px;'>{{detail.sc}}</text>
</view>
<view>
<text>{{detail.cat}}
<text class="threeD" wx:if='{{detail["3d"]}}'>3D</text>
<text class='imax' wx:if='{{detail.imax}}'>IMAX</text>
</text>
</view>
<view>
<text>{{detail.src}}/ {{detail.dur}}分钟</text>
</view>
<view>
<text>{{detail.rt}}</text>
</view>
</view>
</view>
<view class="btns">
<button>想看</button>
<button>评分</button>
</view>
</view>
<view class="info">
<view class='text'>
<text style='{{hideText ? "-webkit-line-clamp: 2" : ""}}'>{{detail.dra}}</text>
</view>
<view class='controlText {{hideClass}}' bindtap='toggleText'>
<text></text>
</view>
</view>
<view class="comment">
<view style='padding:5px 20px;font-size:14px;border-bottom:1px solid #ccc;border-top:1px solid #ccc'>
<text>观众评论</text>
</view>
<view class='item' wx:for='{{comment}}' wx:key='{{index}}'>
<view class='img'>
<image src='{{item.avatarurl}}' />
</view>
<view class='main'>
<view class='nickname'>{{item.nickName}}</view>
<view class='content'>{{item.content}}</view>
</view>
</view>
</view>
<view class='preferential-purchase'>
<text>优惠购买</text>
</view>
</view>
|
二、wxss样式文件代码如下：
/*detail.wxss*/
.top{
height:200px;
padding:10px;
}
.top .left image{
width:100px;
height:140px;
}
.top .right{
margin-left:10px;
color:#fff;
opacity:0.7;
font-size:14px;
}
.top .right view{
margin-bottom:3px;
}
.top .threeD{
background-color:#49d95d;
border:1px solid #999;
}
.top .imax{
background-color:transparent;
border:1px solid #999;
}
.top .btns{
display: flex;
}
.top .btns button{
background:rgba(0,0,0,0.4);
height:20px;
line-height:20px;
flex:1;
color:#fff;
margin:0 5px;
font-size:14px;
}
.info .text{
transition: 1s;
}
.info .text text{
padding:5px;
font-size:14px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
transition: 1s;
}
.controlText{
text-align: center;
}
.controlText text{
display:inline-block;
width:28px;
height:20px;
}
.controlText text:after{
content:'';
display: block;
width:10px;
height:10px;
border: 1px solid;
border-left-width: 0;
border-top-width: 0;
transform: rotate(45deg);
}
.down text:after{
content:'';
display: block;
width:10px;
height:10px;
border: 1px solid;
border-left-width: 0;
border-top-width: 0;
transform: rotate(-135deg);
}
.comment{
margin-top:20px;
background: #fff;
}
.comment .item{
display: flex;
padding:10px;
}
.comment .item image{
width:40px;
height:40px;
border-radius:50%;
}
.comment .nickname{
font-size:14px;
}
.comment .main{
padding:10px 20px 5px 0;
border-bottom:1px solid #ccc;
}
.comment .main:last-child{
border-bottom: none;
}
.comment .img{
margin-right:20px;
}
.preferential-purchase{
position: fixed;
width:100%;
bottom:0;
background: #dd4021;
color:#fff;
text-align: center;
padding:10px 0;
}
.preferential-purchase text{
}
|
三、js页面代码如下：
// detail.js
Page({
data: {
hideText: true,
hideClass: 'up'
},
onLoad(params){
const that = this;
const id = params.id,
url = 'https://m.maoyan.com/movie/' + id + '.json'
console.log(id)
wx.request({
url: url,
success(res){
console.log(res);
let detail = res.data.data.MovieDetailModel,
comment = res.data.data.CommentResponseModel.hcmts.splice(0,3); // 获取热门评论前三
detail.dra = detail.dra.replace(/(<p>)|(</p>)/g,'');
that.setData({
detail: detail,
comment: comment
});
console.log(that.data.detail)
}
})
},
toggleText(){
let hideText = this.data.hideText,
hideClass = this.data.hideClass == 'up' ? 'down' : 'up';
this.setData({
hideText: !hideText,
hideClass: hideClass
})
}
})
|
.jpg)
.jpg)
