上代碼
使用了vant框架
所以大家自己去下載一下
這個組件
<template>
? <div>
? ? <van-tabs v-model="active">
? ? ? <van-tab>
? ? ? ? <div slot="title">
? ? ? ? ? <van-icon name="more-o" />評論專區(qū)
? ? ? ? </div>
? ? ? ? <textarea placeholder="請輸入評論" rows="5" maxlength="50"></textarea>
? ? ? ? <van-button type="primary" size="large">發(fā)送評論</van-button>
? ? ? </van-tab>
? ? </van-tabs>
? ? ? <van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
? ? ? <van-panel
? ? ? ? ? title="評論"
? ? ? ? ? :desc="item.user_name"
? ? ? ? ? :status="item.add_time"
? ? ? ? ? v-for="item in comments"
? ? ? ? ? :key="item.add_time"
? ? ? ? >
? ? ? ? ? <div>{{item.content === '' || item.content === 'undefined' ? '此用戶很懶,什么都沒說。': item.content}}</div>
? ? ? ? ? <div slot="footer">
? ? ? ? ? ? <van-button size="small" icon="arrow-up">贊</van-button>
? ? ? ? ? ? <van-button size="small" type="danger" icon="arrow-down">踩</van-button>
? ? ? ? ? </div>
? ? ? ? </van-panel>
? ? ? <!-- <van-button? type="danger" text="加載更多" size="large" @click="getMore" /> -->
? ? ? </van-list>
? </div>
</template>
<script>
import { Notify } from "vant";
export default {
? data() {
? ? return {
? ? ? list: [],
? ? ? loading: false,
? ? ? finished: false,
? ? ? pageindex: 1,
? ? ? comments: []
? ? };
? },
? created() {
? ? this.getComments();
? },
? methods: {
? ? onLoad() {
? ? ? // 異步更新數(shù)據(jù)
? ? ? setTimeout(() => {
? ? ? ? // 異步滑動加載數(shù)據(jù)
? ? ? ? this.getMore()
? ? ? ? // 加載狀態(tài)結(jié)束
? ? ? ? this.loading = false;
? ? ? ? if (this.comments.length >= 80) {
? ? ? ? ? this.finished = true;
? ? ? ? }
? ? ? }, 500);
? ? },
? ? getComments() {
? ? ? this.$http
? ? ? ? .get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex)
? ? ? ? .then(result => {
? ? ? ? ? if (result.body.status === 0) {
? ? ? ? ? ? // this.comments = result.body.message;
? ? ? ? ? ? // 不替換老數(shù)據(jù)
? ? ? ? ? ? this.comments = this.comments.concat(result.body.message)
? ? ? ? ? } else {
? ? ? ? ? ? Notify({
? ? ? ? ? ? ? duration: 2000,
? ? ? ? ? ? ? message: "獲取評論內(nèi)容失敗,請通知管理員!",
? ? ? ? ? ? ? background: "red"
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? });
? ? },
? ? getMore() {
? ? ? this.pageindex++;
? ? ? this.getComments();
? ? }
? },
? props: ["id"]
};
</script>
<style>
.van-tabs__line {
? width: 100% !important;
}
.van-button--primary {
? background-color: #84c225;
? border: #84c225;
}
.van-panel__content {
? margin-left: 17px;
}
.van-cell:not(:last-child)::after {
? left: 0px;
}
</style>
干脆把整頁代碼都給你們好了 api記得替換 我是全局api
