首页 > 小程序教程 > 微信小程序橙色影片详情评分页面设计制作开发教程

微信小程序橙色影片详情评分页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序橙色影片详情评分页面设计制作开发教程,制作好以后效果图如下:
一、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
		})
	}
})

模板简介:该模板名称为【微信小程序橙色影片详情评分页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,980次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-09
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
Bootstrap 单页式简历模板 微信公众平台 表格式简历模板 企业网站 自适应 微信文章 微信模板 html5 响应式
您可能会喜欢的其他模板