豆瓣&评论列表页实现

评论列表页实现

实现点击该页面跳转后

完成布局和样式

  1. 先创建comment页面app.json中

可以将该页面放在第一位,这样方便后面调试页面在第一页

1
"pages/comment/comment",

ctrl+s保存后生成页面

  1. comment.wxml代码
1
2
3
4
5
6
7
8
<view  class="container">
<view  class="item-group"
bindtap="onItemTapEvent">
<image    class="thumbnail"  src="{{thumbnail}}"></image>
<text class="item-title">{{title}}</text>
<text   class="item-rate">{{rate}}分</text>
</view>

  1. comment.wxss样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container{
  padding:20rpx  30rpx;
}

.item-group{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item-group .thumbnail{
  width: 40rpx;
  height: 50rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.item-group  .item-title{
  font-size: 32rpx;
  color : #41be57;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.item-group  .item-rate{
    font-size: 28rpx;
    color: #ccc;
}

完成后效果

样式

  1. 将comment页面降级，实现跳转功能

app.json

1
2
"pages/index/index",
"pages/comment/comment",
  1. detail.wxml中实现跳转url

url 中接收了从上一页传递到下一页的一些参数?后面的

1
2
3
<navigator class="more-comment" 
url="/pages/comment/comment?id={{id}}&type={{type}}&thumbnail={{item.cover.image.small.url}}&title={{item.title}}&rate={{item.rating.value}}" >查看更多短评</navigator>

此时我们在comment.js中打印一下数据

1
2
3
onLoad: function (options) {
  console.log(options)
}

问题：没有打印id和type

问题

解决：detail.js中虽然获取到了type和id，但是没有保存

1
2
3
4
that.setData({
id:id,
type:type
})
  1. comment.js中保存数据
1
2
3
4
onLoad: function (options) {
   var  that=this;
   that.setData(options);
}
  1. 渲染数据

修改以下数据，从url中获取的参数，渲染到页面，会根据点击实现数据的改变

修改

点击完成页面跳转

  1. 能够点击头像完成上一页的跳转

能够点击跳转

分析：能够通过rul或js实现

  1. 这里我们通过js实现,绑定一个点击事件

绑定一个点击事件

  1. comment.js函数实现

这里我们调用的是微信的Api,返回到上一页

1
2
3
4
onItemTapEvent:function(event){
  wx.navigateBack({})
},

问题，这里返回到的是上一页的最下面，不是很好

解决： 在detail界面中加上一个滚动事件，一旦页面show出来了，就展示在最上面

detail.js

1
2
3
4
5
6
7
8
/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
    wx.pageScrollTo({
      scrollTop:0,
    })
}

问题解决。

加载评论数据

  1. 分析，影评和上面的标题的左右间距都一样，所以可以将它放在.container中

  2. wxml代码

1
2
3
<!-- 影评 -->
<view  class="comment-title">全部影评({{total}})</view>
<onecomment wx:for="{{comments}}" item="{{item}}" ></onecomment>
  1. wxss代码
1
2
3
4
.comment-title{
  margin-top: 60rpx;
  font-size: 40rpx;
}

评论列表页面抽取注册成组件

分析

评论的样式和布局之前已经在详情页中已经做了，我们在这里没有必要再写一遍，我们可以将之前评论的样式和布局单独抽取出来，做成一个组件，然后直接使用组件，非常方便。

  1. 创建一个onecomment组件

  2. 将detail中的comment代码剪切到onecomment中

代码

  1. 将css代码剪切到onecomment中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 左边固定，右边内容适配 */
 .comment-group{
  display: flex;
  justify-content: flex-start;
  padding-top: 40rpx;
}
.comment-group .left-comment{
  width: 70rpx;
  margin-right: 20rpx;
}
.left-comment  .avatar{
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.comment-group  .right-comment{
  flex:1;
}
.right-comment   .username-rate{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.username-rate .username{
  font-size: 36rpx;
  margin-right: 20rpx;
}
.release-time{
  color: #b3b3b3;
  font-size: 32rpx;
  margin-top: 10rpx;
}
.content{
  font-size: 32rpx;
  color: #353535;
  margin-top:10rpx;
}
  1. 再onecomment中设置一个属性，这样我们可以使用使数据显示

onecomment.js

1
2
3
4
5
6
properties: {
      item:{
        type:Object,
        value:{}
      }
},

onecomment.wxml代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view  class="comment-group" >
<view  class="left-comment">
<image  class="avatar" src="{{item.user.avatar}}"></image>
</view>
 <view class="right-comment">
<view  class="username-rate">
<view  class="username">{{item.user.name}}</view>
<stars  rate="{{item.rating.value*2}}" starsize="30" istext="{{false}}" ></stars>
</view>
<view  class="release-time">{{item.create_time}}</view>
<view  class="content">{{item.comment}}
</view>
</view>
</view>
  1. detail中使用先注册组件

detail.json

1
2
3
4
5
6
{
  "usingComponents": {
    "stars":"/components/stars/stars",
    "onecomment":"/components/onecomment/onecomment"
  }
}

detail.wxml中使用

1
<onecomment  wx:for="{{comments}}" item="{{item}}" ></onecomment>

其他样式和之前一样，但是出现了问题：星星样式没了

解决：再onecomment中注册stars组件

1
2
3
4
5
6
{
  "component": true,
  "usingComponents": {
    "stars":"/components/stars/stars"
  }
}

完成。

请求评论数据

  1. comment.js

请求数据，先导入network.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import  {network}  from  "../../utils/network.js";

  onLoad: function (options) {
     var  that=this;
     that.setData(options);
    network.getItemComments({
      type:options.type,
      id:options.id,
      start:1,
      count:20,
      success:function(data){
        var  total = data.total;
        var  comments = data.interests;
        that.setData({
          total:total,
          comments:comments
        })
      }
    })
  },
  1. comment中注册组件

comment.json

1
2
3
4
5
{
  "usingComponents": {
    "onecomment":"/components/onecomment/onecomment"
  }
}
  1. 使用组件
1
2
3
4
5
{
  "usingComponents": {
    "onecomment":"/components/onecomment/onecomment"
  }
}

完成

翻页按钮布局

要完成样式

样式

  1. comment.wxml代码
1
2
3
4
5
6
<view  class="page-btn-group">
<button class="page-btn"bindtap="onPrePageTap"
>上一页</button>
<button  class="page-btn"bindtap="onNextPageTap"
>下一页</button>
</view>
  1. comment.wxss代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.page-btn-group{
  margin-top:40rpx;
  margin-bottom: 40rpx;
  display:flex;
  /* 水平方向从左到右 */
  justify-content: flex-start;
  /* 垂直反向居中 */
  align-items: center;
}

.page-btn{
  flex:1;
  height: 60rpx;
  color: #898989;
  border-color:#898989;
  line-height:60rpx;
}

翻页功能实现

优化用户体验，从用户角度出发，给用户更好的体验

  1. 点击绑定事件

绑定

  1. comment.js实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import  {network}  from  "../../utils/network.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
      total:0,
      start:1,
      count:20
  },
  /**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
     var  that=this;
    that.setData(options);
    // 传入的为第一页
    that.getComments(1);
  },
// 传入一个start参数
getComments:function(start){
var  that= this;
var type  = that.data.type;
var  id = that.data.id;
// loading判断用户点击是上一页还是下一页
if(start>that.data.start){
  that.setData({
    nextLoading:true
  });
}else{
  that.setData({
    preLoading:true
  });
}
  network.getItemComments({
    type:type,
    id:id,
    start:start,
    count:20,
    success:function(data){
      var  total = data.total;
      var  comments = data.interests;
      that.setData({
        total:total,
        comments:comments,
        start:start,
        // 数据请求完毕loading关闭
        preLoading:false,
        nextLoading:false
      });
      // 优化，点击下一页或上一页返回为最上面
        wx.pageScrollTo({
          scrollTop: 0,
        })
    }
  })
},
// 返回上一页
  onItemTapEvent:function(event){
    wx.navigateBack({})
  },
// 上一页
  onPrePageTap:function(event){
    var  that= this;
    var  oldStar= that.data.start;
    var count = that.data.count;
    if(oldStar-count>0){
        var  start =  oldStar-count; 
        that.getComments(start);
    }
  },
  // 下一页
  onNextPageTap:function(event){
      var  that=this;
      var oldStart = that.data.start;
      var  start = oldStart+that.data.count;
      that.getComments(start);
  }
})

基本完成

完成