operation result
film history
Whenever a user browses a movie, the movie information will be stored in the data cache. Click "Movies I've Watched" on my interface to enter this interface. When the page is loaded, the movieHistory data is read from the cache and stored in shouList to complete the rendering of the data.
When the user clicks to delete the record, the system will know the id of the movie, remove the movie from the display list according to the id, and overwrite the original cached movieHistory. At the same time, listen to the page loading on onload and reacquire the new 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() {
}
})
favorite movies
When users browse movies, they can collect movies and store their data in the cache movieCollect to overwrite the original value. The user can also cancel the collection, remove the movie information according to the movie id, and write the data into the cache movieCollect again.
When the user clicks "Favorite Movies" on my interface, it will judge that if it is not logged in, it will jump to the login interface. If you are already logged in, the information of favorite movies will be displayed.
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() {
}
})