02 全局组件+优化列表组件（动画，关注，顶踩，scroll-view，swiper）

02 全局组件+优化列表组件（动画，关注，顶踩，scroll-view，swiper）

思路

1 全局分割线（全局组件）思路：

写好小组件

<template>
	<view style="height: 20rpx;background-color: #F5F5F5;"></view>
</template>

<script>
</script>

<style>
</style>

在main.js 里面组册为全局组件

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 组册全局组件
import divider from './components/common/divider.vue';
Vue.component('divider',divider)

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

在页面组建中可以随意调用全局组件。

<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<!-- 列表样式 -->
			<common-list :item="item" :index="index"></common-list>
			<!-- 全局分割线组件 -->
			<divider></divider>
		</block>

	</view>
</template>

2 设置v-if 来调节图片展示关注按钮。

<!-- 按钮 -->
			<view v-if="!item.isFollow" class="flex align-center justify-center rounded bg-main text-white" style="width: 90rpx;height: 50rpx;">
				关注
			</view>

<!-- 图片 -->
		<image v-if="item.titlepic" :src="item.titlepic" style="height: 350rpx;" class="rounded w-100"></image>

3 关注、点赞、点踩、评论、转发按钮动画效果

# 关注
<view v-if="!item.isFollow" 
			class="flex align-center justify-center rounded bg-main text-white animated faster" 
			style="width: 90rpx;height: 50rpx;"
			hover-class="jello text-main">
				关注
			</view>
# 点赞 点踩 评论 转发
<view class="flex align-center">
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count}}</text>
			</view>
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count}}</text>
			</view>
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main">
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{item.comment_count}}</text>
			</view>
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{item.share_num}}</text>
			</view>
		</view>

4 点赞、点踩逻辑限定。

common-list.vue(子组件)

<!-- 图标按钮 -->
		<view class="flex align-center">
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main" @click="doSupport('support')"
			:class="item.support.type === 'support' ? 'support-alive' : '' ">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '支持'}}</text>
			</view>
			<view class="flex align-center justify-center flex-1 animated faster"
			hover-class="jello text-main" @click="doSupport('unsupport')"
			:class="item.support.type === 'unsupport' ? 'support-alive' : '' ">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
			</view>

Index.vue(父组件)

# 设计的数据结构
data() {
			return {
				list: [{
						username: "昵称",
						userpic: "/static/default.jpg",
						newstime: "2019-10-20 下午04:30",
						isFollow: false,
						title: "我是标题",
						titlepic: "/static/demo/datapic/11.jpg",
						support: {
							type: "",
							support_count: 1,
							unsupport_count: 0
						},
						comment_count: 2,
						share_num: 2
					},
					{
						username: "昵称",
						userpic: "/static/default.jpg",
						newstime: "2019-10-20 下午04:30",
						isFollow: true ,
						title: "我是标题",
						titlepic: "/static/demo/datapic/11.jpg",
						support: {
							type: "support",
							support_count: 0,
							unsupport_count: 0
						},
						comment_count: 2,
						share_num: 2
					},
					{
						username: "昵称",
						userpic: "/static/default.jpg",
						newstime: "2019-10-20 下午04:30",
						isFollow: false,
						title: "我是标题",
						titlepic: "",
						support: {
							type: "",
							support_count: 0,
							unsupport_count: 2
						},
						comment_count: 2,
						share_num: 2
					}
				]
			}
		},
      
# 涉及的方法
methods: {
			// 顶踩操作
			doSupport(e){
				// 拿到当前队对象
				let item = this.list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				if (item.support.type === ''){
					item.support[e.type+'_count']++
				} else if (item.support.type === 'support' && e.type === 'unsupport'){
					// 顶 -1
					item.support.support_count--;
					// 踩 +1
					item.support.unsupport_count++;
				} else if (item.support.type === 'unsupport' && e.type === 'support'){
					// 踩 -1
					item.support.unsupport_count --;
					// 顶 +1
					item.support.support_count ++;
				}
				item.support.type = e.type
				uni.showToast({
					title:msg+'成功'
				})
				
			}

效果图：