第七章 posts文章列表和详情

轮播图

<swiper id='swiper' catchtap='onSwiperTap' autoplay='{{true}}' indicator-dots='{{true}}' indicator-active-color='white'>
<swiper-item>
<image src='/images/wx.png' data-postId='3' id='swiper-img' class='swipimg'></image>
</swiper-item>

创建模板

<template name="postItem">
<view class='post-container'>
</template>

引用模板

<import src="post-item/post-item-template.wxml" />
<view>
<template is="postItem" data="{{...item}}" />
</view>

@import "post-item/post-item-template.wxss";

布局

view{display:flex;
flex-direction:row/colum；
flex-wrap: nowrap;
width:100%;
border:100%;
border:1rpx solid red;
justify-content: space-between/center/space-around;}

提示框

wx.showModal({
title: '收藏',
showCancel: true,
})

捕获id传递参数

<image src='/images/wx.png' data-postId='3' class='swipimg'></image>
</swiper-item>

target指image, currentTarget 指swiper组件

onPostTap: function(event) {
console.log(event);
var postId = event.currentTarget.dataset.postid;
console.log(postId);
this.setData({
postId
});
wx.navigateTo({
url: 'post-detail/post-detail?postId=' + postId,
});
},

detail-js

var postId = options.postId;
// 通过id绑定对应的内容
var currentData = postData.postList[postId];
this.setData({
// 获取的对象赋值给postData
postData: currentData,
// postId赋值给currentPostId,给其他地方调用
currentPostId: postId,
});

点击收藏该文章

onCollectTap: function(event) {
// 同步获取缓存
this.getPostCollectedSync();
},

同步缓存

getPostCollectedSync() {
var that = this;
// 拿到缓存对象
var postCollectPrefs = wx.getStorageSync("post_collect");
var isCollected = postCollectPrefs[that.data.currentPostId];
// 判断是否已经收藏
isCollected = !isCollected;
// 更新进缓存
postCollectPrefs[that.data.currentPostId] = isCollected;
// 提示框
that.showToast(postCollectPrefs, isCollected);
},

收藏提示框

showToast: function(postCollectPrefs, isCollected) {
wx.setStorageSync('post_collect', postCollectPrefs);
// 更新数据绑定的data数据,否则视图层不会切换图片
this.setData({
isCollected: isCollected
});
wx.showToast({
title: isCollected ? '收藏成功' : '取消收藏',
duration: 1000
})
},