feat: 社区页面

src/pages.json

@@ -13,7 +13,8 @@
     {
       "path": "pages/tabbar/community/index",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "社区",
+        "navigationStyle":"custom"
       }
     },
     {

src/pages/tabbar/community/index.vue

@@ -1,71 +1,49 @@
 <template>
   <view>
-    <u-search :showAction="true" actionText="取消"/>
-    <!-- tab表格 -->
-    <!-- <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change" /> -->
-    <u-tabs :list="list" lineWidth="40" lineColor="#5992bb" :is-scroll="false" :current="current" @change="change"
-      :activeStyle="{
-        color: '#303133',
-        fontWeight: 'bold',
-        transform: 'scale(1.05)',
-      }"
-      :inactiveStyle="{
-        color: '#606266',
-        transform: 'scale(1)',
-      }"
-      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-    />
-    <view>
-      <view class="album">
-        <view class="album__avatar">
-          <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
-        </view>
-        <view class="album__content">
-          <u--text :text="niackName" bold size="17"></u--text>
-          <u--text
-            margin="0 0 8px 0"
-            style="padding-top: 7px"
-            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
-          >
-          </u--text>
-          <u-album :urls="urls2"></u-album>
-        </view>
-      </view>
-      <view class="reply-info">
-        <view class="reply-left">
-          <u-icon name="red-packet" size="30px"></u-icon>
-          <u--text :text="followNum" size="22px"></u--text>
-        </view>
-        <view class="reply-right">
-          <u-icon name="thumb-up-fill" size="30px"></u-icon>
-          <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
-          <u-icon name="share-fill" size="30px"></u-icon>
-        </view>
-      </view>
-    </view>
-    <view v-if="showAllCom">
-      <view class="all-comments">
-        <view>
-          <u--text size="15px" text="全部评论"> </u--text>
-        </view>
-        <view class="comment-order">
-          <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent" @change="changeCom"></u-subsection>
-        </view>
-      </view>
-      <view class="album">
-        <view class="album__avatar">
-          <image src="/static/logo.png" style="width: 32px; height: 32px"></image>
-        </view>
-        <view class="album__content">
-          <u--text :text="niackName" bold size="17"></u--text>
-          <u--text
-            margin="0 0 8px 0"
-            style="padding-top: 9px"
-            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
-          >
-          </u--text>
-        </view>
+    <u-navbar leftIcon="search" leftIconSize="32">
+      <view slot="center">
+        <u-tabs :list="list" lineWidth="32" />
       </view>
+    </u-navbar>
+    <view class="content" :style="{ marginTop: totalHeight + 'px' }">
+      <swiper class="swiper" style="height: 100vh" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
+        <swiper-item>
+          <scroll-view scroll-y="true" class="scroll-y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
+            <view style="padding: 10rpx 20rpx;background-color: #ffffff;">
+              <view class="u-demo-block__content" v-for="item in 10">
+                <view class="album">
+                  <view class="album__avatar">
+                    <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="" style="width: 32px; height: 32px"></image>
+                  </view>
+                  <view class="album__content">
+                    <u--text text="uView UI" type="primary" bold size="17"></u--text>
+                    <u--text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></u--text>
+                    <u-album :urls="urls2"></u-album>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </swiper-item>
+        <swiper-item>
+          <scroll-view scroll-y="true">
+            <view style="padding: 10rpx 20rpx">
+              <view class="u-demo-block__content" v-for="item in 10">
+                <view class="album">
+                  <view class="album__avatar">
+                    <image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="" style="width: 32px; height: 32px"></image>
+                  </view>
+                  <view class="album__content">
+                    <u--text text="uView UI" type="primary" bold size="17"></u--text>
+                    <u--text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></u--text>
+                    <u-album :urls="urls2"></u-album>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </swiper-item>
+      </swiper>
     </view>
   </view>
 </template>
@@ -75,13 +53,12 @@ export default {
     return {
       list: [{ name: '关注' }, { name: '推荐' }],
       current: 0,
-      subsectionListCurrent: 0,
-      subsectionList: ['最新', '推荐'],
-      isAllReply: true,
-      showAllCom: false,
-      searching: false,
-      isSearch: true,
-      followNum: 111111,
+      //
+      scrollTop: 0,
+      old: {
+        scrollTop: 0,
+      },
+      albumWidth: 0,
       urls2: [
         'https://cdn.uviewui.com/uview/album/1.jpg',
         'https://cdn.uviewui.com/uview/album/2.jpg',
@@ -93,116 +70,57 @@ export default {
         'https://cdn.uviewui.com/uview/album/8.jpg',
         'https://cdn.uviewui.com/uview/album/9.jpg',
         'https://cdn.uviewui.com/uview/album/10.jpg',
+        'https://cdn.uviewui.com/uview/album/10.jpg',
       ],
-      niackName: '昵称昵称昵称',
-      followInfo: '昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称',
-      keyword: '123',
-      searchCon: '',
-      src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
     };
   },
+  computed: {
+    totalHeight() {
+      return uni.getSystemInfoSync().statusBarHeight + 44;
+    },
+  },
   methods: {
-    change(index) {
-      this.current = index;
+    upper(e) {
+      // console.log(e);
     },
-    backTop() {
-      this.isAllReply = true;
-      this.showAllCom = true;
+    lower(e) {
+      // console.log(e);
     },
-    searchTop() {
-      // this.isSearch = false;
-      // this.searching = true;
-      uni.navigateTo({
-        url: '/pages/client/CommunitySearch/index',
-      });
+    scroll(e) {
+      // console.log(e);
+      this.old.scrollTop = e.detail.scrollTop;
     },
-    allReply() {
-      uni.navigateTo({
-        url: '/pages/client/allComments/index',
+    goTop(e) {
+      // 解决view层不同步的问题
+      this.scrollTop = this.old.scrollTop;
+      this.$nextTick(() => {
+        this.scrollTop = 0;
+      });
+      uni.showToast({
+        icon: 'none',
+        title: '纵向滚动 scrollTop 值已被修改为 0',
       });
-    },
-    changeCom(index) {
-      this.subsectionListCurrent = index;
-    },
-    getFocus() {},
-    cancelSearch() {
-      this.isSearch = true;
-      this.searching = false;
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-.top-nav {
-  width: 100%;
-  height: 50px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.nav-left {
-  display: flex;
+.scroll-y {
+  height: 100vh;
 }
-
-.left-text {
-  font-size: 15px;
-  padding-top: 22%;
-  padding-left: 5px;
-}
-
 .album {
-  display: flex;
-}
+  @include flex;
+  align-items: flex-start;
 
-.album__avatar {
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.album__content {
-  margin-left: 10px;
-  flex: 1;
-}
-
-.reply-info {
-  margin-top: 15px;
-  margin-left: 15px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.reply-left {
-  display: flex;
-}
-
-.reply-right {
-  display: flex;
-}
+  &__avatar {
+    background-color: $u-bg-color;
+    padding: 5px;
+    border-radius: 3px;
+  }
 
-.all-comments {
-  margin: 15px 0 10px 12px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.comment-order {
-  width: 100px;
-}
-
-.comment-order .u-subsection__item {
-  display: flex;
-  justify-content: center;
-}
-
-.comment-order .u-subsection--button {
-  border: 0.2px solid;
-  border-radius: 55px;
-}
-.search-content {
-  display: flex;
-}
-.search-tags {
-  display: flex;
-  justify-content: space-around;
+  &__content {
+    margin-left: 10px;
+    flex: 1;
+  }
 }
 </style>