0. 权限
一.热映
index.js
data: {
classHot:[]
},
loadHot(){
console.log("加载首页电影");
let db = wx.cloud.database();
db.collection("movies_hot").where({
movieType:0
}).get().then(res=>{
console.log("查询到多条数据:",res)
this.setData({classHot:res.data})
})
},
onLoad(){
this.loadHot();
}
index.wxml
<view class="main-container">
<!-- 单一影片开始 -->
<view class="movie-item" wx:for="{{classHot}}" wx:key="index">
<navigator url="/pages/movie/movie?id={{item.id}}" hover-class="none">
<!-- 图片开始 -->
<view class="movie-item-avatar">
<image src="{{item.img}}"></image>
</view>
<!-- 图片结束 -->
<!-- 内容容器开始 -->
<view class="movie-item-content-wrapper">
<view class="content">
<view class="title">{{item.nm}}</view>
<view class="line-ellipsis">{{item.cat}}</view>
<view class="line-ellipsis">主演:{{item.star}}</view>
</view>
<!-- 评分开始 -->
<view class="score-wrapper">
<view class="score">{{item.sc}}</view>
<!-- <view>暂无评分</view> -->
</view>
<!-- 评分结束 -->
</view>
<!-- 内容容器结束 -->
</navigator>
</view>
<!-- 单一影片结束 -->
</view>
二.待映
1. 点击顶部导航，动态更新列表内容(待映/经典)
- 点击某一个顶部导航选项时，为选中项设置选中状态（有红色下划线）,其他选项恢复默认。
如何通过js修改wxml页面的样式
通过data,在data中声明变量,然后通过data中变量的值,修改页面中的样式
// index.js
data:{
cid:1, //描述当前顶部导航选中项的类别ID
movies:[]
},
//自定义方法handleChangeNav,通过点击修改样式
//怎么知道点击的是哪个?通过传参(参数在自定义属性data-cid=1,2,3)
/**更新导航时,触发该事件 */
handleChangeNav(e){
let id = e.target.dataset.id
this.setData({cid:id}) //将data中的cid,改为选中项ID
},
<!--index.wxml-->
<!-- 选项卡开始 -->
<view class="switch-hot">
<text class="hot-item {{cid==1?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="1">热映</text>
<text class="hot-item {{cid==2?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="2">待映</text>
<text class="hot-item {{cid==3?'hot-item-active':''}}" bindtap="handleChangeNav" data-id="3">经典</text>
</view>
handleChangeNav(e){
let id = e.target.dataset.id
this.setData({cid:id}) //将data中的cid,改为选中项ID
if(id==1){
this.loadHot()
}else if(id==2){
this.loadWait()
}else if(id==3){
this.loadClassic()
}else{
console.log("加载失败")
}
},
三.经典/热映
loadWait(){
console.log("加载待映电影");
let db = wx.cloud.database();
db.collection("movies_wait").where({
movieType:0
}).get().then(res=>{
console.log("查询到多条数据:",res)
this.setData({classHot:res.data})
})
},
loadClassic(){
console.log("加载经典电影");
let db = wx.cloud.database();
db.collection("movies_classic").where({
movieType:0
}).get().then(res=>{
console.log("查询到多条数据:",res)
this.setData({classHot:res.data})
})
},
四.电影详情页
步骤
- 先创建movies页面
- 编写movie页面
- 首页在首位
- 点击首页的电影, 跳转到对应的电影详清
- 点击电影时,需要传参
1. 渲染页面
// index.wxml
<!-- 单一影片开始 -->
<view class="movie-item" wx:for="{{classHot}}" wx:key="index">
<navigator url="/pages/movie/movie?id={{item.id}}" hover-class="none">
</view>
onLoad(options) {
console.log(typeof options.id)
console.log(options.id);
let id = parseInt(options.id);
let db = wx.cloud.database();
db.collection('movies_details').where({
id:id
}).get().then(res=>{
console.log("查询电影详情数据:",res)
this.setData({moviesDetails:res.data[0]})
}).catch(err=>{
console.warn(err);
})
},
<!-- 背景图开始 -->
<view class="poster-background" style="background-image:url({{moviesDetails.img}})">
</view>
<!-- 背景图结束 -->
<view class="detail">
<!--海报帧开始-->
<view class="poster">
<image src="{{moviesDetails.img}}"></image>
</view>
<!--海报帧结束-->
<!-- 内容区域开始 -->
<view class="content">
<view class="title line-ellipsis">{{moviesDetails.nm}}</view>
<view class="score line-ellipsis">{{moviesDetails.sc}}</view>
<view class="type line-ellipsis">主演: {{moviesDetails.star}}</view>
<view class="type line-ellipsis">{{moviesDetails.cat}}</view>
<view class="type line-ellipsis">{{moviesDetails.rt}} 上映</view>
</view>
<!-- 内容区域结束 -->
</view>
</view>
<!-- 顶部区域结束 -->
<!-- 简介区域开始 -->
<view class="introduction" bindtap="handleTapIntro">
<view class="{{isOpen?'':'line-clamp'}}">
{{moviesDetails.dra}}
</view>
<view class="more">
<image src="/images/{{isOpen ? 'arrow_up.png' : 'arrow_down.png'}}"></image>
</view>
</view>
<!-- 简介区域结束 -->
<!-- 演职人员开始 -->
<view class="actors">
<view class="title">演职人员</view>
<scroll-view scroll-x="true" class="actors-list">
<view class="actors-item" wx:for="{{moviesDetails.avatorImg}}" wx:key="index">
<image src="{{item}}"></image>
</view>
</scroll-view>
</view>
<!-- 演职人员结束 -->
<!-- 剧照开始 -->
<view class="photos">
<view class="title">视频和剧照</view>
<scroll-view scroll-x="true" class="photos-list">
<view class="photos-item" wx:for="{{moviesDetails.photos}}">
<image src="{{item}}" mode="widthFix"></image>
</view>
</scroll-view>
</view>
<!-- 剧照结束 -->
2.渲染简介
//movie.js
data: {
isOpen:false,
moviesDetails:[]
},
handleTapIntro(){
this.setData({isOpen:!this.data.isOpen})
},
//movie.wxml
<!-- 简介区域开始 -->
<view class="introduction" bindtap="handleTapIntro">
<view class="{{isOpen?'':'line-clamp'}}">
{{moviesDetails.dra}}
</view>
<view class="more">
<image src="/images/{{isOpen ? 'arrow_up.png' : 'arrow_down.png'}}"></image>
</view>
</view>
<!-- 简介区域结束 -->
3. 全屏预览图片
如果将事件绑定到image上，事件绑定数量太多，影响性能。可以将事件绑定到父元素上，这样只需要绑定一次，由于事件冒泡现象，点击image时也会触发scroll-view的tap事件，捕获该事件之后依然可以实现相应业务。
view循环遍历,图片有多少张,遍历多少次,事件绑定多次,不好 — 使用事件委托解决
//movie.js
// 全屏预览图片
handlePreviewImage(e){
let avatorImg = this.data.moviesDetails.avatorImg
wx.previewImage({
urls: avatorImg,
})
},
//movie.wxml
<view class="title">演职人员</view>
<scroll-view scroll-x="true" class="actors-list">
<!-- view循环遍历,图片有多少张,遍历多少次,事件绑定多次,不好
使用事件委托解决
-->
<view class="actors-item" wx:for="{{moviesDetails.avatorImg}}" wx:key="index" bindtap="handlePreviewImage">
<image src="{{item}}"></image>
</view>
</scroll-view>
<scroll-view scroll-x="true" class="photos-list" bindtap="handlePreviewImage">
<!-- 使用事件委托解决 : 将事件绑定在scroll-view上-->
<view class="photos-item" wx:for="{{movieInfo.thumb}}" wx:key="index">
<!--mode="aspectFill" 为了防止图片变形
图片过多,加上 懒加载 lazy-load
演职人员,也可以加上懒加载
-->
<image lazy-load mode="aspectFill" src="{{item}}" data-i="{{index}}"></image>
</view>
</scroll-view>
通过事件源对象获取data-i属性值时，若点击的是image，则事件源对象就是这个image组件。所以获取的是image组件上绑定的data-i属性值。
点击图片之间的缝隙,点出来的一直都是第一张图片, 默认值
特殊情况，如果没有点到image组件，则e.target描述的就不是image组件，而是scroll-view。而scroll-view身上并没有data-i属性，所以拿到的参数i为undefined。
handlePreviewImage(e){
let i = e.target.dataset.i; //获取 data-i 参数值
if(i==undefined){
return; //如果没点击到图片,方法直接返回
}
图片预览完整代码
handlePreviewImage(e){
let i = e.target.dataset.i;
console.log("预览图片:",i);
if(i==undefined){
return;
}
let avatorImg = this.data.moviesDetails.avatorImg
wx.previewImage({
urls: avatorImg,
current:avatorImg[i]
})
},
4.加载评论
data: {
isOpen:false,
moviesDetails:[],
comments:[]
},
onLoad(options) {
// 加载评论
this.loadComments(options.id)
},
loadComments(id){
console.log("当前电影的id:",id);
console.log(typeof id);
let db = wx.cloud.database();
db.collection('comments').where({
movieid:id
}).get().then(res=>{
console.log("查询到评论数据数据:",res);
this.setData({comments:res.data})
//未查询出结果,权限问题,评论不是我们发表的,是别人发表的
//修改权限,所有用户可读;
// 索引建议,不用管
})
},
扫一扫
34万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
