开始

加一些动画的效果，增加接口跳转到内容页。

优化动画效果

之前引入的动画库
image.png

image.png

  1. <view class="index-list animated rotateIn">

瞬间动画
image.png
旋转进来
image.png
选择低调一点的
image.png
速度快一点。加个fast
image.png

  1. <view class="index-list animated fadeInLeft fast">

关注优化

关注这里，不应该是消失，
image.png

加个感叹号，取反
image.png

  1. <view class="u-f-ac" v-show="!item.isguanzhu">
  2.                 <view class="icon iconfont icon-zengjia"></view>关注
  3.             </view>

需要点击关注。
image.png
增加一个关注事件
image.png

  1. <view class="u-f-ac" v-show="!item.isguanzhu" @tap="guanzhu">

改变值，然后加一个提示
image.png

image.png

image.png

最新版
https://uniapp.dcloud.io/api/ui/prompt.html#showtoast
image.png

image.png

  1. methods:{
  2.             guanzhu() {
  3.                 this.item.isguanzhu = true;
  4.                 uni.showToast({
  5.                     title: '关注成功'
  6.                 });
  7.             }
  8.         }

image.png

笑脸和哭脸事件

image.png

image.png

  1. <view class="u-f-ac">
  2.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==1)}"
  3.                 @tap="caozuo('ding')">
  4.                     <view class="icon iconfont icon-icon_xiaolian-mian"></view>
  5.                     {{item.infonum.dingnum}}
  6.                 </view>
  7.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==2)}"
  8.                 @tap="caozuo('cai')">
  9.                     <view class="icon iconfont icon-kulian"></view>
  10.                     {{item.infonum.cainum}}
  11.                 </view>
  12.             </view>

image.png
如果点了顶，再点击踩，那么顶就减1，踩加1。
当前点击了顶，又点击一次，那么就什么也不操作。
image.png

image.png

数值一直在累计增加
image.png
最后要修改状态
image.png

  1. caozuo(type) {
  2.                 switch (type){
  3.                     case "ding":
  4.                         if(this.item.infonum.index==1) {return;}
  5.                         this.item.infonum.dingnum++;
  6.                         if(this.item.infonum.index==2) {
  7.                             this.item.infonum.cainum--;
  8.                         }
  9.                         this.item.infonum.index=1;
  10.                         break;
  11.                     case "cai":
  12.                         if(this.item.infonum.index==2) {return;}
  13.                         this.item.infonum.cainum++;
  14.                         if(this.item.infonum.index==2) {
  15.                             this.item.infonum.dingnum--;
  16.                         }
  17.                         this.item.infonum.index=2;
  18.                         break;
  19.                     default:
  20.                         break;
  21.                 }
  22.             }

顶过之后不能再顶了。
image.png
点击踩之后，前面的顶减去1
image.png

跳转内容详情页

title和图片增加点击事件
image.png

  1. <view class="index-list2" @tap="oepndetail()">{{item.title}}</view>
  2.         <view class="index-list3 u-f-ajc" @tap="oepndetail()">

image.png

  1. oepndetail() {
  2.                 console.log('进入详情页');
  3.             }

点击标题
image.png

最终代码

  1. <template>
  2.     <view class="index-list animated fadeInLeft fast">
  3.         <view class="index-list1 u-f-ac u-f-jsb">
  4.             <view class="u-f-ac">
  5.                 <image :src="item.userpic" mode="widthFix" lazy-load></image>
  6.                 {{item.username}}
  7.             </view>
  8.             <view class="u-f-ac" v-show="!item.isguanzhu" @tap="guanzhu">
  9.                 <view class="icon iconfont icon-zengjia"></view>关注
  10.             </view>
  11.         </view>
  12.         <view class="index-list2" @tap="oepndetail()">{{item.title}}</view>
  13.         <view class="index-list3 u-f-ajc" @tap="oepndetail()">
  14.             <!-- 图片 -->
  15.             <image :src="item.titlepic" mode="widthFix" lazy-load>
  16.             </image>
  17.             <!-- 视频 -->
  18.             <template v-if="item.type=='video'">
  19.                 <view class="index-list-play icon iconfont icon-bofang"></view>
  20.                 <view class="index-list-playinfo">
  21.                     {{item.playnum}}播放 {{item.long}}
  22.                 </view>
  23.             </template>
  24.         </view>
  25.         <view class="index-list4 u-f-ac u-f-jsb">
  26.             <view class="u-f-ac">
  27.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==1)}"
  28.                 @tap="caozuo('ding')">
  29.                     <view class="icon iconfont icon-icon_xiaolian-mian"></view>
  30.                     {{item.infonum.dingnum}}
  31.                 </view>
  32.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==2)}"
  33.                 @tap="caozuo('cai')">
  34.                     <view class="icon iconfont icon-kulian"></view>
  35.                     {{item.infonum.cainum}}
  36.                 </view>
  37.             </view>
  38.             <view class="u-f-ac">
  39.                 <view class="u-f-ac">
  40.                     <view class="icon iconfont icon-pinglun1"></view>
  41.                     {{item.commentnum}}
  42.                 </view>
  43.                 <view class="u-f-ac">
  44.                     <view class="icon iconfont icon-zhuanfa"></view>
  45.                     {{item.sharenum}}
  46.                 </view>
  47.             </view>
  48.         </view>
  49.     </view>
  50. </template>
  52. <script>
  53.     export default {
  54.         props: {
  55.             item: Object,
  56.             index: Number
  57.         },
  58.         onLoad(){
  59.             console.log('子组件内',this.item);
  60.         },
  61.         methods:{
  62.             guanzhu() {
  63.                 this.item.isguanzhu = true;
  64.                 uni.showToast({
  65.                     title: '关注成功'
  66.                 });
  67.             },
  68.             caozuo(type) {
  69.                 switch (type){
  70.                     case "ding":
  71.                         if(this.item.infonum.index==1) {return;}
  72.                         this.item.infonum.dingnum++;
  73.                         if(this.item.infonum.index==2) {
  74.                             this.item.infonum.cainum--;
  75.                         }
  76.                         this.item.infonum.index=1;
  77.                         break;
  78.                     case "cai":
  79.                         if(this.item.infonum.index==2) {return;}
  80.                         this.item.infonum.cainum++;
  81.                         if(this.item.infonum.index==2) {
  82.                             this.item.infonum.dingnum--;
  83.                         }
  84.                         this.item.infonum.index=2;
  85.                         break;
  86.                     default:
  87.                         break;
  88.                 }
  89.             },
  90.             oepndetail() {
  91.                 console.log('进入详情页');
  92.             }
  93.         }
  94.     }
  95. </script>
  97. <style scoped>
  98.     .index-list {
  99.         padding: 20upx;
  100.         border-bottom: 1upx solid #EEEEEE;
  101.     }
  103.     .index-list1 {
  104.         /* display: flex; */
  105.         /* justify-content: space-between; */
  106.         /* align-items: center; */
  107.     }
  109.     .index-list1>view:first-child {
  110.         /* display: flex;
  111.         align-items: center; */
  112.         color: #999999;
  113.     }
  115.     .index-list1>view:first-child image {
  116.         width: 95upx;
  117.         height: 90upx;
  118.         border-radius: 100%;
  119.         margin-right: 10upx;
  120.     }
  122.     .index-list1>view:last-child {
  123.         /* display: flex;
  124.         align-items: center; */
  125.         background: #F4F4F4;
  126.         border-radius: 5upx;
  127.         padding: 0 10upx;
  128.     }
  130.     .index-list2 {
  131.         padding-top: 15upx;
  132.         font-size: 32upx;
  133.     }
  135.     .index-list3 {
  136.         position: relative;
  137.         padding-top: 15upx;
  138.     }
  140.     .index-list3>image {
  141.         width: 100%;
  142.         border-radius: 20upx;
  143.     }
  145.     .index-list-play {
  146.         position: absolute;
  147.         font-size: 140upx;
  148.         color: #FFFFFF;
  149.     }
  151.     .index-list-playinfo {
  152.         position: absolute;
  153.         background: rgba(51, 51, 51, 0.72);
  154.         color: #FFFFFF;
  155.         bottom: 8upx;
  156.         right: 8upx;
  157.         border-radius: 40upx;
  158.         font-size: 22upx;
  159.         padding: 0 12upx;
  160.     }
  162.     .index-list4 {
  163.         padding: 15upx 0;
  164.         /* display: flex; */
  165.         /* justify-content: space-between; */
  166.         /* align-items: center; */
  167.     }
  169.     .index-list4 view {
  170.         color: #999999;
  171.     }
  173.     .index-list4>view:first-child {
  174.         /* display: flex;
  175.         align-items: center; */
  176.     }
  178.     .index-list4>view:last-child {
  179.         /* display: flex;
  180.         align-items: center; */
  181.     }
  183.     .index-list4>view>view {
  184.         /* display: flex;
  185.         align-items: center; */
  186.     }
  188.     .index-list4>view>view>view,
  189.     .index-list4>view>view:first-child {
  190.         margin-right: 10upx;
  191.     }
  192.     .index-list4 .active,.index-list4 .active>view{
  193.         color: #c5f61c;
  194.     }
  195. </style>

结束