✨ feat:社区列表的渲染和新增样式

src/App.vue

@@ -11,6 +11,8 @@ export default {
 
 <style lang="scss" scoped>
 @import 'uview-ui/index.scss';
+@import './design/index.scss';
+
 page {
   background-color: #efefef;
   color: $uni-text-color;

src/api/client/home.js

@@ -44,13 +44,12 @@ export function getCategoriesApi() {
   });
 }
 
-
 // 热门搜索商家
 export function listHotMerchant(data) {
   return request({
     url: `/maintain/listHotMerchant/`,
     method: 'post',
-	data: data,
+    data: data,
     header: {
       'Content-Type': 'application/json',
     },
@@ -62,7 +61,7 @@ export function likeMerchant(data) {
   return request({
     url: `/maintain/likeMerchant/`,
     method: 'post',
-	data: data,
+    data: data,
     header: {
       'Content-Type': 'application/json',
     },
@@ -81,4 +80,4 @@ export function hotMerchant(id) {
       'content-type': 'application/x-www-form-urlencoded',
     },
   });
-}
+}

src/components/comment/CommentList.vue → src/components/commentList/index.vue

@@ -1,29 +1,43 @@
 <template>
   <view>
-    <block>
-      <view class="item" v-for="item in 10" :key="item" @click="$Router.push('/pages/community/commDetail/index')">
+    <view v-if="list.length > 0">
+      <view
+        class="item"
+        v-for="item in list"
+        :key="item.id"
+        @click="$Router.push('/pages/community/commDetail/index')"
+      >
         <view class="item-avatar">
           <u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg" />
         </view>
         <view class="item-content">
           <u--text text="uView UI" type="primary" bold size="17"></u--text>
-          <u--text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></u--text>
+          <u--text margin="0 0 8px 0" :text="item.textContent"></u--text>
           <u-album :urls="urls2"></u-album>
           <view>
             <text class="iconfont icon-thumb-up" style="font-size: 48rpx; padding: 20rpx 0"></text>
-            <text class="iconfont icon-heart" style="font-size: 48rpx; padding: 20rpx 0; margin-left: 20rpx"></text>
+            <text
+              class="iconfont icon-heart"
+              style="font-size: 48rpx; padding: 20rpx 0; margin-left: 20rpx"
+            ></text>
           </view>
         </view>
       </view>
-    </block>
-    <block>
-      <u-empty icon="/static/default-graph/no-comment.png" text="暂无数据"></u-empty>
-    </block>
+    </view>
+    <view v-else>
+      <u-empty icon="/static/default-graph/empty.png" text="暂无数据"></u-empty>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
   data() {
     return {
       albumWidth: 0,

src/components/empty/index.vue

@@ -1,15 +1,38 @@
 <template>
-  <u-empty :icon="empty" :text="text"></u-empty>
+  <view class="empty">
+    <image :src="empty" mode="scaleToFill" />
+    <text>{{ text }}</text>
+  </view>
 </template>
 
 <script>
-import empty from '@/static/images/empty.png';
+import empty from '@/static/default-graph/empty.png';
 export default {
-  data() {
-    return {
-      text: '暂无数据',
-      empty: empty,
-    };
+  props: {
+    text: {
+      type: String,
+      default: '暂无数据',
+    },
+    empty: {
+      type: String,
+      default: empty,
+    },
   },
 };
 </script>
+
+
+<style lang="scss" scoped>
+.empty {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: brown;
+  image {
+    width: 350rpx;
+    height: 400rpx;
+  }
+}
+</style>>

src/design/background.scss

@@ -0,0 +1,207 @@
+.bg-red {
+  background-color: #e54d42;
+  color: #ffffff;
+}
+
+.bg-orange {
+  background-color: #f37b1d;
+  color: #ffffff;
+}
+
+.bg-yellow {
+  background-color: #fbbd08;
+  color: #333333;
+}
+
+.bg-olive {
+  background-color: #8dc63f;
+  color: #ffffff;
+}
+
+.bg-green {
+  background-color: #39b54a;
+  color: #ffffff;
+}
+
+.bg-cyan {
+  background-color: #1cbbb4;
+  color: #ffffff;
+}
+
+.bg-blue {
+  background-color: #0081ff;
+  color: #ffffff;
+}
+
+.bg-purple {
+  background-color: #6739b6;
+  color: #ffffff;
+}
+
+.bg-mauve {
+  background-color: #9c26b0;
+  color: #ffffff;
+}
+
+.bg-pink {
+  background-color: #e03997;
+  color: #ffffff;
+}
+
+.bg-brown {
+  background-color: #a5673f;
+  color: #ffffff;
+}
+
+.bg-grey {
+  background-color: #8799a3;
+  color: #ffffff;
+}
+
+.bg-gray {
+  background-color: #f0f0f0;
+  color: #333333;
+}
+
+.bg-black {
+  background-color: #333333;
+  color: #ffffff;
+}
+
+.bg-white {
+  background-color: #ffffff;
+  color: #666666;
+}
+
+.bg-shadeTop {
+  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
+  color: #ffffff;
+}
+
+.bg-shadeBottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  color: #ffffff;
+}
+
+.bg-red.light {
+  color: #e54d42;
+  background-color: #fadbd9;
+}
+
+.bg-orange.light {
+  color: #f37b1d;
+  background-color: #fde6d2;
+}
+
+.bg-yellow.light {
+  color: #fbbd08;
+  background-color: #fef2ced2;
+}
+
+.bg-olive.light {
+  color: #8dc63f;
+  background-color: #e8f4d9;
+}
+
+.bg-green.light {
+  color: #39b54a;
+  background-color: #d7f0dbff;
+}
+
+.bg-cyan.light {
+  color: #1cbbb4;
+  background-color: #d2f1f0;
+}
+
+.bg-blue.light {
+  color: #0081ff;
+  background-color: #cce6ff;
+}
+
+.bg-purple.light {
+  color: #6739b6;
+  background-color: #e1d7f0;
+}
+
+.bg-mauve.light {
+  color: #9c26b0;
+  background-color: #ebd4ef;
+}
+
+.bg-pink.light {
+  color: #e03997;
+  background-color: #f9d7ea;
+}
+
+.bg-brown.light {
+  color: #a5673f;
+  background-color: #ede1d9;
+}
+
+.bg-grey.light {
+  color: #8799a3;
+  background-color: #e7ebed;
+}
+
+.bg-gradual-red {
+  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
+  color: #ffffff;
+}
+
+.bg-gradual-orange {
+  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
+  color: #ffffff;
+}
+
+.bg-gradual-green {
+  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
+  color: #ffffff;
+}
+
+.bg-gradual-purple {
+  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
+  color: #ffffff;
+}
+
+.bg-gradual-pink {
+  background-image: linear-gradient(45deg, #ec008c, #6739b6);
+  color: #ffffff;
+}
+
+.bg-gradual-blue {
+  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
+  color: #ffffff;
+}
+.bg-1a1a1a {
+  background-color: #1a1a1a;
+  color: #ffffff;
+}
+.bg-gdBlue {
+  background-color: #2695fe;
+  color: #ffffff;
+}
+
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.bg-mask {
+  background-color: #333333;
+  position: relative;
+}
+
+.bg-mask::after {
+  content: '';
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}

src/design/flex.scss

@@ -0,0 +1,103 @@
+/* ==================
+     flex弹性布局
+ ==================== */
+
+.flex {
+  display: flex;
+}
+
+.basis-xs {
+  flex-basis: 20%;
+}
+
+.basis-sm {
+  flex-basis: 40%;
+}
+
+.basis-df {
+  flex-basis: 50%;
+}
+
+.basis-lg {
+  flex-basis: 60%;
+}
+
+.basis-xl {
+  flex-basis: 80%;
+}
+
+.flex-sub {
+  flex: 1;
+}
+
+.flex-twice {
+  flex: 2;
+}
+
+.flex-treble {
+  flex: 3;
+}
+
+.flex-direction {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-center {
+  align-self: flex-center;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}

src/design/index.scss

@@ -0,0 +1,6 @@
+@import './flex.scss';
+@import './margin.scss';
+@import './padding.scss';
+@import './text.scss';
+@import './background.scss';
+@import './shadow.scss';

src/design/margin.scss

@@ -0,0 +1,157 @@
+.margin-0 {
+  margin: 0;
+}
+
+.margin-xs {
+  margin: 10upx;
+}
+
+.margin-sm {
+  margin: 20upx;
+}
+
+.margin {
+  margin: 30upx;
+}
+
+.margin-lg {
+  margin: 40upx;
+}
+
+.margin-xl {
+  margin: 50upx;
+}
+
+.margin-top-xs {
+  margin-top: 10upx;
+}
+
+.margin-top-sm {
+  margin-top: 20upx;
+}
+
+.margin-top {
+  margin-top: 30upx;
+}
+
+.margin-top-lg {
+  margin-top: 40upx;
+}
+
+.margin-top-xl {
+  margin-top: 50upx;
+}
+
+.margin-right-xs {
+  margin-right: 10upx;
+}
+
+.margin-right-sm {
+  margin-right: 20upx;
+}
+
+.margin-right {
+  margin-right: 30upx;
+}
+
+.margin-right-lg {
+  margin-right: 40upx;
+}
+
+.margin-right-xl {
+  margin-right: 50upx;
+}
+
+.margin-bottom-xs {
+  margin-bottom: 10upx;
+}
+
+.margin-bottom-sm {
+  margin-bottom: 20upx;
+}
+
+.margin-bottom {
+  margin-bottom: 30upx;
+}
+
+.margin-bottom-lg {
+  margin-bottom: 40upx;
+}
+
+.margin-bottom-xl {
+  margin-bottom: 50upx;
+}
+
+.margin-bottom-xxl {
+  margin-bottom: 140upx;
+}
+
+.margin-left-xs {
+  margin-left: 10upx;
+}
+
+.margin-left-sm {
+  margin-left: 20upx;
+}
+
+.margin-left {
+  margin-left: 30upx;
+}
+
+.margin-left-lg {
+  margin-left: 40upx;
+}
+
+.margin-left-xl {
+  margin-left: 50upx;
+}
+
+.margin-lr-xs {
+  margin-left: 10upx;
+  margin-right: 10upx;
+}
+
+.margin-lr-sm {
+  margin-left: 20upx;
+  margin-right: 20upx;
+}
+
+.margin-lr {
+  margin-left: 30upx;
+  margin-right: 30upx;
+}
+
+.margin-lr-lg {
+  margin-left: 40upx;
+  margin-right: 40upx;
+}
+
+.margin-lr-xl {
+  margin-left: 50upx;
+  margin-right: 50upx;
+}
+
+.margin-tb-xs {
+  margin-top: 10upx;
+  margin-bottom: 10upx;
+}
+
+.margin-tb-sm {
+  margin-top: 20upx;
+  margin-bottom: 20upx;
+}
+
+.margin-tb {
+  margin-top: 30upx;
+  margin-bottom: 30upx;
+}
+
+.margin-tb-lg {
+  margin-top: 40upx;
+  margin-bottom: 40upx;
+}
+
+.margin-tb-xl {
+  margin-top: 50upx;
+  margin-bottom: 50upx;
+}

src/design/padding.scss

@@ -0,0 +1,157 @@
+.padding-0 {
+  padding: 0;
+}
+
+.padding-xs {
+  padding: 10upx;
+}
+
+.padding-sm {
+  padding: 20upx;
+}
+
+.padding {
+  padding: 30upx;
+}
+
+.padding-lg {
+  padding: 40upx;
+}
+
+.padding-xl {
+  padding: 50upx;
+}
+
+.padding-top-xs {
+  padding-top: 10upx;
+}
+
+.padding-top-sm {
+  padding-top: 20upx;
+}
+
+.padding-top {
+  padding-top: 30upx;
+}
+
+.padding-top-lg {
+  padding-top: 40upx;
+}
+
+.padding-top-xl {
+  padding-top: 50upx;
+}
+
+.padding-right-xs {
+  padding-right: 10upx;
+}
+
+.padding-right-sm {
+  padding-right: 20upx;
+}
+
+.padding-right {
+  padding-right: 30upx;
+}
+
+.padding-right-lg {
+  padding-right: 40upx;
+}
+
+.padding-right-xl {
+  padding-right: 50upx;
+}
+
+.padding-bottom-xs {
+  padding-bottom: 10upx;
+}
+
+.padding-bottom-sm {
+  padding-bottom: 20upx;
+}
+
+.padding-bottom {
+  padding-bottom: 30upx;
+}
+
+.padding-bottom-lg {
+  padding-bottom: 40upx;
+}
+
+.padding-bottom-xl {
+  padding-bottom: 50upx;
+}
+
+.padding-left-xs {
+  padding-left: 10upx;
+}
+
+.padding-left-sm {
+  padding-left: 20upx;
+}
+
+.padding-left {
+  padding-left: 30upx;
+}
+
+.padding-left-lg {
+  padding-left: 40upx;
+}
+
+.padding-left-xl {
+  padding-left: 50upx;
+}
+
+.padding-left-xxl {
+  padding-left: 80upx;
+}
+
+.padding-lr-xs {
+  padding-left: 10upx;
+  padding-right: 10upx;
+}
+
+.padding-lr-sm {
+  padding-left: 20upx;
+  padding-right: 20upx;
+}
+
+.padding-lr {
+  padding-left: 30upx;
+  padding-right: 30upx;
+}
+
+.padding-lr-lg {
+  padding-left: 40upx;
+  padding-right: 40upx;
+}
+
+.padding-lr-xl {
+  padding-left: 50upx;
+  padding-right: 50upx;
+}
+
+.padding-tb-xs {
+  padding-top: 10upx;
+  padding-bottom: 10upx;
+}
+
+.padding-tb-sm {
+  padding-top: 20upx;
+  padding-bottom: 20upx;
+}
+
+.padding-tb {
+  padding-top: 30upx;
+  padding-bottom: 30upx;
+}
+
+.padding-tb-lg {
+  padding-top: 40upx;
+  padding-bottom: 40upx;
+}
+
+.padding-tb-xl {
+  padding-top: 50upx;
+  padding-bottom: 50upx;
+}

src/design/shadow.scss

@@ -0,0 +1,115 @@
+.shadow[class*='-red'] {
+  box-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
+}
+
+.shadow[class*='-orange'] {
+  box-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
+}
+
+.shadow[class*='-yellow'] {
+  box-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
+}
+
+.shadow[class*='-olive'] {
+  box-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
+}
+
+.shadow[class*='-green'] {
+  box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
+}
+
+.shadow[class*='-cyan'] {
+  box-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
+}
+
+.shadow[class*='-blue'] {
+  box-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
+}
+
+.shadow[class*='-purple'] {
+  box-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
+}
+
+.shadow[class*='-mauve'] {
+  box-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
+}
+
+.shadow[class*='-pink'] {
+  box-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
+}
+
+.shadow[class*='-brown'] {
+  box-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
+}
+
+.shadow[class*='-grey'] {
+  box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+}
+
+.shadow[class*='-gray'] {
+  box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+}
+
+.shadow[class*='-black'] {
+  box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+}
+
+.shadow[class*='-white'] {
+  box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+}
+
+.text-shadow[class*='-red'] {
+  text-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
+}
+
+.text-shadow[class*='-orange'] {
+  text-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
+}
+
+.text-shadow[class*='-yellow'] {
+  text-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
+}
+
+.text-shadow[class*='-olive'] {
+  text-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
+}
+
+.text-shadow[class*='-green'] {
+  text-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
+}
+
+.text-shadow[class*='-cyan'] {
+  text-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
+}
+
+.text-shadow[class*='-blue'] {
+  text-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
+}
+
+.text-shadow[class*='-purple'] {
+  text-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
+}
+
+.text-shadow[class*='-mauve'] {
+  text-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
+}
+
+.text-shadow[class*='-pink'] {
+  text-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
+}
+
+.text-shadow[class*='-brown'] {
+  text-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
+}
+
+.text-shadow[class*='-grey'] {
+  text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+}
+
+.text-shadow[class*='-gray'] {
+  text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
+}
+
+.text-shadow[class*='-black'] {
+  text-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
+}

src/design/text.scss

@@ -0,0 +1,172 @@
+/* ==================
+          文本
+ ==================== */
+
+.text-xs {
+  font-size: 20upx;
+}
+
+.text-sm {
+  font-size: 24upx;
+}
+
+.text-df {
+  font-size: 28upx;
+}
+
+.text-lg {
+  font-size: 32upx;
+}
+
+.text-xl {
+  font-size: 36upx;
+}
+
+.text-xxl {
+  font-size: 44upx;
+}
+.text-xxxl {
+  font-size: 52upx;
+}
+
+.text-sl {
+  font-size: 80upx;
+}
+
+.text-xsl {
+  font-size: 120upx;
+}
+
+.text-Abc {
+  text-transform: Capitalize;
+}
+
+.text-ABC {
+  text-transform: Uppercase;
+}
+
+.text-abc {
+  text-transform: Lowercase;
+}
+
+.text-price::before {
+  content: '¥';
+  font-size: 80%;
+  margin-right: 4upx;
+}
+
+.text-cut {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-content {
+  line-height: 1.6;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-red,
+.line-red,
+.lines-red {
+  color: #e54d42;
+}
+
+.text-orange,
+.line-orange,
+.lines-orange {
+  color: #f37b1d;
+}
+
+.text-yellow,
+.line-yellow,
+.lines-yellow {
+  color: #fbbd08;
+}
+
+.text-olive,
+.line-olive,
+.lines-olive {
+  color: #8dc63f;
+}
+
+.text-green,
+.line-green,
+.lines-green {
+  color: #39b54a;
+}
+
+.text-cyan,
+.line-cyan,
+.lines-cyan {
+  color: #1cbbb4;
+}
+
+.text-blue,
+.line-blue,
+.lines-blue {
+  color: #0081ff;
+}
+
+.text-purple,
+.line-purple,
+.lines-purple {
+  color: #6739b6;
+}
+
+.text-mauve,
+.line-mauve,
+.lines-mauve {
+  color: #9c26b0;
+}
+
+.text-pink,
+.line-pink,
+.lines-pink {
+  color: #e03997;
+}
+
+.text-brown,
+.line-brown,
+.lines-brown {
+  color: #a5673f;
+}
+
+.text-grey,
+.line-grey,
+.lines-grey {
+  color: #8799a3;
+}
+
+.text-gray,
+.line-gray,
+.lines-gray {
+  color: #aaaaaa;
+}
+
+.text-black,
+.line-black,
+.lines-black {
+  color: #333333;
+}
+
+.text-white,
+.line-white,
+.lines-white {
+  color: #ffffff;
+}

src/pages.json

@@ -20,7 +20,9 @@
       "path": "pages/client/tabBar/community/index",
       "style": {
         "navigationBarTitleText": "社区",
-        "navigationStyle": "custom"
+        "navigationStyle": "custom",
+        "onReachBottomDistance": 150,
+        "enablePullDownRefresh": true
       }
     },
     {

src/pages/client/tabBar/community/community.js

@@ -0,0 +1,14 @@
+export const communityList = [
+  {
+    name: '关注',
+    type: 'ATTENTION',
+  },
+  {
+    name: '最新',
+    type: 'LATEST',
+  },
+  {
+    name: '最热',
+    type: 'HOTTEST',
+  },
+];

src/pages/client/tabBar/community/index.vue

@@ -1,79 +1,62 @@
 <template>
-  <view>
+  <view class="community">
     <view>
       <!-- 关注和推荐 -->
       <u-navbar :autoBack="true" leftIconSize="0">
         <view slot="center">
-          <u-tabs :list="list" lineWidth="32" @change="tabChange" v-if="!player" />
-          <u-tabs
-            :list="list.filter(tab => tab.name !== '关注')"
-            lineWidth="32"
-            @change="tabChange"
-            v-else
-          />
+          <u-tabs :list="communityList" lineWidth="32" @change="tabChange" :duration="duration" />
         </view>
       </u-navbar>
 
       <!-- 消息列表 -->
       <view class="content" :style="{ marginTop: totalHeight + 'px' }">
-        <swiper class="swiper" style="height: 100vh" :duration="duration">
+        <swiper :duration="duration" style="height: 80vh">
           <swiper-item>
             <scroll-view
               scroll-y="true"
-              class="scroll-y"
+              style="height: 100%"
               @scrolltoupper="upper"
               @scrolltolower="lower"
               @scroll="scroll"
             >
-              <view style="padding: 10rpx 20rpx; background-color: #ffffff">
-                <comment-list></comment-list>
-              </view>
-            </scroll-view>
-          </swiper-item>
-
-          <swiper-item>
-            <scroll-view scroll-y="true">
-              <view style="padding: 10rpx 20rpx">
-                <comment-list></comment-list>
+              <view class="list">
+                <comment-list :list="list" />
               </view>
             </scroll-view>
           </swiper-item>
         </swiper>
       </view>
+      <uni-load-more :status="loadingType" />
     </view>
     <tabbar currentTab="clientCommunity" />
   </view>
 </template>
+
 <script>
-import CommentList from '@/components/comment/CommentList.vue';
+import CommentList from '@/components/commentList/index.vue';
 import { clientContentList } from '@/api/client/community.js';
+import { communityList } from './community';
+
 export default {
   components: {
     CommentList,
   },
   data() {
     return {
-      list: [
-        {
-          name: '关注',
-          type: 'ATTENTION',
-        },
-        {
-          name: '最新',
-          type: 'LATEST',
-        },
-        {
-          name: '最热',
-          type: 'HOTTEST',
-        },
-      ],
-      keyWord: '',
+      communityList,
       duration: 700,
       scrollTop: 0,
       old: {
         scrollTop: 0,
       },
-      player: false,
+      list: [],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+        type: 'ATTENTION',
+        keyWord: '',
+      },
+      loadingType: '',
     };
   },
 
@@ -83,47 +66,83 @@ export default {
     },
   },
 
-  //点击tab时触发
-  onTabItemTap() {},
-  //页面加载触发
-  onLoad() {},
-  mounted() {
-    // let params = {
-    // 	keyWord:this.keyWord,
-    // 	type:'ATTENTION'
-    // }
+  onLoad() {
+    this.getContentList();
   },
+
   onShow() {
-    this.handlerInitList();
+    /* 隐藏原生的tabbar */
     uni.hideTabBar({
       animation: false,
     });
   },
+
+  /* 下拉刷新 */
+  onPullDownRefresh() {
+    this.params.pageNum = 1;
+    this.list = [];
+
+    uni.stopPullDownRefresh();
+    this.getContentList();
+  },
+
+  onReachBottom() {
+    this.getContentList('more');
+  },
+
   methods: {
-    // 初始化社区列表
-    handlerInitList() {
-      let params = {
-        keyWord: '',
-        type: 'ATTENTION',
-      };
-      clientContentList(params).then(res => {
-        console.log('@@@res', res);
-      });
-    },
-    upper(e) {},
+    /* 获取初始化数据 */
+    async getContentList(type = 'refresh') {
+      if (type === 'refresh') {
+        uni.showToast({
+          title: '数据加载中~',
+          icon: 'none',
+        });
+        this.params.pageNum = 1;
+      } else if (this.loadingType === 'no-more') {
+        return;
+      }
 
-    lower(e) {},
+      this.loadingType = 'loading';
 
-    scroll(e) {
-      this.old.scrollTop = e.detail.scrollTop;
+      try {
+        let res = await clientContentList(this.params);
+
+        // if (res.code == 200 && res.data) {
+        //   this.list = res.records;
+        // } else {
+        //   uni.showToast({
+        //     title: '数据请求失败！',
+        //     icon: 'none',
+        //   });
+        // }
+        this.list = res.records;
+        console.log(res);
+
+        if (this.list.length === 0) {
+          if (type === 'refresh') loadingType = 'no-data';
+          if (type === 'more') loadingType = 'no-more';
+        }
+
+        this.loadingType = loadingType;
+        this.params.pageNum++;
+        this.list = type === 'refresh' ? list : this.list.concat(list);
+
+        if (type === 'refresh') {
+          uni.hideLoading();
+        }
+      } catch (error) {
+        this.loadingType = '';
+      }
     },
 
-    //切换tab
     tabChange(item) {
-      uni.showToast({
-        title: '提示的内容',
-        icon: '',
-      });
+      this.params.type = item.type;
+      this.getContentList();
+    },
+
+    scroll(e) {
+      this.old.scrollTop = e.detail.scrollTop;
     },
 
     goTop(e) {
@@ -136,19 +155,17 @@ export default {
         title: '纵向滚动 scrollTop 值已被修改为 0',
       });
     },
+
+    upper(e) {},
+    lower(e) {},
   },
 };
 </script>
-<style lang="scss" scoped>
-.scroll-y {
-  height: 100vh;
-}
 
-.search-item {
-  padding: 0 20rpx;
-  height: 80rpx;
-  line-height: 80rpx;
+
+<style lang="scss" scoped>
+.list {
+  padding: 10rpx 20rpx;
   background-color: #ffffff;
-  margin-bottom: 10rpx;
 }
 </style>

src/pages/client/tabBar/home/index.vue

@@ -177,6 +177,7 @@ export default {
     },
   },
   onShow() {
+    /* 隐藏原生的tabbar */
     uni.hideTabBar({
       animation: false,
     });

src/pages/client/tabBar/message/index.vue

@@ -91,6 +91,7 @@ export default {
     };
   },
   onShow() {
+    /* 隐藏原生的tabbar */
     uni.hideTabBar({
       animation: false,
     });

src/pages/client/tabBar/mine/index.vue

@@ -172,6 +172,7 @@ export default {
     await this.handlerInitUserMessage();
   },
   onShow() {
+    /* 隐藏原生的tabbar */
     uni.hideTabBar({
       animation: false,
     });