运行结果
电影历史记录
每当用户浏览电影，会把这个电影信息存入数据缓存。在我的界面点击“看过的电影”进入该界面。在页面加载时，从缓存里面读取movieHistory的数据，并储存在shouList中，完成对数据的渲染。
当用户点击删除记录，系统会会的这个电影的id，根据id把这个电影从展示列表中移除，并重新覆盖原来的缓存movieHistory。同时在onload监听页面加载，重新获取新的movieHistory。
wxml
<view class="ShouList">
<view class="collection" wx:for="{
{shouList}}" wx:key="index">
<!-- 上图片 -->
<view class="collection_img" id="{
{item.id}}" bindtap="loadMovieDetail">
<image src="http://127.0.0.1:8181/{
{item.moviePoster}}" ></image>
</view>
<view class="canceS" data-id="{
{item.id}}" bindtap="cance">删除记录</view>
<!-- 下影名 -->
<view class="collection_name">{
{item.name}}</view>
</view>
</view>
wxss
/* pages/collection/collection.wxss */
.ShouList{
display: flex;
flex-wrap: wrap;
}
.collection{
width: 33%;
margin-left: 0.3%;
margin-top: 10px;
position: relative;
}
.collection .collection_img{
width: 100%;
height: 150px;
display: flex;
margin: auto;
}
.collection .collection_img image{
width: 100%;
height: 100%;
}
.collection .canceS{
position: absolute;
margin: auto;
width: 100%;
color: white;
height: 25px;
line-height: 25px;
bottom: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
}
.collection .collection_name{
width: 100%;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
js
// pages/collection/collection.js
Page({
/**
* 页面的初始数据
*/
data: {
shouList:[]
},
// 删除记录
cance(e){
var index=e.currentTarget.dataset.id
var list=this.data.shouList
for(var i in list){
if (list[i].id==index) {
list.splice(i,1)
}
}
this.setData({
shouList:list
})
wx.setStorageSync('movieHistory', list)
list.splice(index,1)
wx.showToast({
title: '取消成功',
icon:'success',
duration:1000 //持续世间
})
if(wx.getStorageSync('movieHistory').length==0){
wx.removeStorageSync('movieHistory')
}
// console.log(index)
},
loadMovieDetail: function (e) {
console.log(e);
// 首先判断一下是否登录
// 如果没有登录(判断token)
var token = wx.getStorageSync("token");
if (token.length == 0) {
// 未登录，跳转界面
wx.navigateTo({
url: '../login/login'
})
// console.log("1111111111111null")
} else {
// 已登录
var id = e.currentTarget.id;
console.log(id)
wx.navigateTo({
// 进行页面的跳转
url: '../movieDetail/movieDetail?id=' + id
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var list=wx.getStorageSync('movieHistory')
this.setData({
shouList:list
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
收藏电影
用户在浏览电影时，可对电影进行收藏，并将其数据存入缓存中movieCollect，覆盖原来的值。用户也可取消收藏，根据电影id移除这个电影的信息，重新把数据写入缓存movieCollect。
用户在我的界面点击“收藏电影“，会进行判断如果是未登录状态，则跳转到登录界面。如果已经登录，则显示收藏电影的信息。
wxml
<view class="ShouList">
<view class="collection" wx:for="{
{shouList}}" wx:key="index">
<!-- 上图片 -->
<view class="collection_img" id="{
{item.id}}" bindtap="loadMovieDetail">
<image src="http://127.0.0.1:8181/{
{item.moviePoster}}" ></image>
</view>
<view class="canceS" data-id="{
{item.id}}" bindtap="cance">取消收藏</view>
<!-- 下影名 -->
<view class="collection_name">{
{item.name}}</view>
</view>
</view>
wxss
/* pages/collection/collection.wxss */
.ShouList{
display: flex;
flex-wrap: wrap;
}
.collection{
width: 33%;
margin-left: 0.3%;
margin-top: 10px;
position: relative;
}
.collection .collection_img{
width: 100%;
height: 150px;
display: flex;
margin: auto;
}
.collection .collection_img image{
width: 100%;
height: 100%;
}
.collection .canceS{
position: absolute;
margin: auto;
width: 100%;
color: white;
height: 25px;
line-height: 25px;
bottom: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
}
.collection .collection_name{
width: 100%;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
js
// pages/collection/collection.js
Page({
/**
* 页面的初始数据
*/
data: {
shouList:[]
},
// 取消收藏
cance(e){
var index=e.currentTarget.dataset.id
var list=this.data.shouList
for(var i in list){
if (list[i].id==index) {
list.splice(i,1)
}
}
this.setData({
shouList:list
})
wx.setStorageSync('movieCollect', list)
list.splice(index,1)
wx.showToast({
title: '取消成功',
icon:'success',
duration:1000 //持续世间
})
if(wx.getStorageSync('movieCollect').length==0){
wx.removeStorageSync('movieCollect')
}
// console.log(index)
},
loadMovieDetail: function (e) {
console.log(e);
// 首先判断一下是否登录
// 如果没有登录(判断token)
var token = wx.getStorageSync("token");
if (token.length == 0) {
// 未登录，跳转界面
wx.navigateTo({
url: '../login/login'
})
// console.log("1111111111111null")
} else {
// 已登录
var id = e.currentTarget.id;
console.log(id)
wx.navigateTo({
// 进行页面的跳转
url: '../movieDetail/movieDetail?id=' + id
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var list=wx.getStorageSync('movieCollect')
this.setData({
shouList:list
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})