add style for tid1867

package.json

@@ -42,6 +42,7 @@
     "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
   },
   "dependencies": {
+    "@climblee/uv-ui": "^1.1.20",
     "@dcloudio/uni-app-plus": "2.0.1-36520221121002",
     "@dcloudio/uni-h5": "2.0.1-36520221121002",
     "@dcloudio/uni-helper-json": "*",

src/pages.json

@@ -1,4 +1,10 @@
 {
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
+		}
+	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/index/index",
@@ -995,6 +1001,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/community",
+			"pages": [
+				{
+					"path": "pages/index",
+					"style" : {
+						"navigationBarTitleText": "社区" 
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

src/subpackage/community/components/list_item.vue

@@ -0,0 +1,67 @@
+<template>
+    <view class="list-item">
+        <image src="https://imgcdn.ouxuanzhineng.cn/upload/63/362/banner/95187047953124ba158c7146e09805a2.jpg" class="wi-img" mode="widthFix"></image>
+        <view class="wi-content">
+            <view class="wi-des">天神之眼👀是什么</view>
+            <view class="wi-user">
+                <view class="wu-info">
+                    <image class="wi-img" mode="aspectFill" src="https://imgcdn.ouxuanzhineng.cn/upload/63/362/banner/95187047953124ba158c7146e09805a2.jpg"></image>
+                    <view class="wi-name">湖人总冠军</view>
+                </view>
+                <view class="wu-like">
+                    <!-- <uv-icon name="heart"></uv-icon> -->
+                    <uv-icon name="heart-fill" color="#ff0036"></uv-icon> 
+                    <text>1</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .list-item {
+		overflow: hidden;
+		border-radius: 12upx;
+        background: #fff;
+        .wi-img{
+            width: 100%;
+        }
+        .wi-content{
+            padding: 12upx;
+        }
+        .wi-des{
+            @include flcw(28upx, 40upx, #333);
+        }
+        .wi-user{
+            margin-top: 12upx;
+            @include ctf(space-between);
+            .wu-info{
+                @include ctf;
+                .wi-img{
+                    margin-right: 12upx;
+                    flex-shrink: 0;
+                    width: 56upx;
+                    height: 56upx;
+                    border-radius: 50%;
+                    overflow: hidden;
+                }
+                .wi-name{
+                    flex-grow: 1;
+                    @include flcw(24upx, 60upx, #5A5A5A);
+                    @include tHide;
+                }
+            }
+            .wu-like{
+                margin-left: 16upx;
+                @include flcw(28upx, 42upx, #ACACAC);
+                @include ctf(flex-end);
+            }
+        }
+	}
+</style>

src/subpackage/community/components/tab_bar.vue

@@ -0,0 +1,58 @@
+<template>
+    <view class="tab-bar" id="tabBar">
+        <view class="tab-bar-item" v-for="i in 5" :key="i">
+            <view class="tbi-img"></view>
+            <view class="tbi-view">tab{{i}}</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { getNodeMes } from "@/utils/util.js";
+export default {
+    methods: {
+        getDomInfo(){
+            return getNodeMes('#tabBar', this);
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .tab-bar{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 999;
+            height: 50px;
+            background: gray;
+            padding-bottom: env(safe-area-inset-bottom);
+            box-sizing: content-box;
+            @include ctf(space-between);
+            .tab-bar-item{
+                flex: 1;
+                flex-shrink: 0;
+                box-sizing: content-box;
+                min-width: 20%;
+                text-align: center;
+                flex-direction: column;
+                @include ctf(center);
+                .tbi-img{
+                    width: 28px;
+                    height: 28px;
+                    background: skyblue;
+                }
+                .tbi-view{
+                    font-size: 10px;
+                    font-weight: 500;
+                    color: #9A9A9D;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    width: 100%;
+                    box-sizing: content-box;
+                }
+            }
+        }
+</style>

src/subpackage/community/pages/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <view class="index-container">
+        <pages-one :safe-height="safeHeight"></pages-one>
+        <tab-bar ref="tabBar"></tab-bar>
+    </view>
+</template>
+
+<script>
+import pagesOne from "./modules/tab_pages/one.vue";
+import tabBar from "../components/tab_bar.vue";
+export default {
+    components:{ tabBar, pagesOne },
+    data() {
+        return {
+            safeHeight: 0,
+        }
+    },
+    async onLoad(){
+        this.initSafeHeight();
+    },
+    methods: {
+        async initSafeHeight(){
+            let _tabBarInfo = await this.$refs?.tabBar?.getDomInfo?.();
+            let _winInfo = uni.getWindowInfo();
+            let _remainHeight = (_winInfo?.windowHeight ?? 0) - (_tabBarInfo?.height ?? 0);
+            this.safeHeight = _remainHeight;
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+    page{
+        background: #f2f2f7;
+    }
+</style>

src/subpackage/community/pages/modules/tab_pages/one.vue

@@ -0,0 +1,97 @@
+<template>
+    <view class="page-one">
+        <view class="po-tab">
+            <uv-tabs id="uvTabs" ref="tabs" :list="tabList" :current="0" :scroll-count="0" bar-animate-mode="worm"
+                :active-style="{color: '#000',fontWeight: 700}" bg-color="#fff" @click="clickTab">
+            </uv-tabs>
+        </view>
+        <scroll-view scroll-y :style="scrollStyle">
+            <uv-waterfall ref="waterfall"
+                v-model="list"
+                :add-time="10"
+                :left-gap="leftGap"
+                :right-gap="rightGap"
+                :column-gap="columnGap"
+                @changeList="changeList"
+            >
+                <!-- 第一列数据 -->
+                <template v-slot:list1>
+                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
+                    <view>
+                        <view style="height: 24rpx;"></view>
+                        <list-item></list-item>
+                        <view style="height: 24rpx;"></view>
+                        <list-item></list-item>
+                        <view style="height: 24rpx;"></view>
+                        <list-item></list-item>
+                        <view style="height: 24rpx;"></view>
+                    </view>
+                </template>
+                <!-- 第二列数据 -->
+                <template v-slot:list2>
+                    <!-- 为了磨平部分平台的BUG，必须套一层view -->
+                    <view>
+                        <list-item></list-item>
+                        <view style="height: 24rpx;"></view>
+                        <list-item></list-item>
+                    </view>
+                </template>
+            </uv-waterfall>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+import { getNodeMes } from "@/utils/util.js";
+import listItem from "../../../components/list_item.vue";
+export default {
+    components: { listItem },
+    props: {
+        safeHeight: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        scrollStyle(){
+            let { scrollHeight } = this;
+            return `height: ${scrollHeight}px;`;
+        },
+    },
+    watch: {
+        safeHeight: {
+            async handler(val) {
+                console.log('one watch safeHeight', val);
+                if(!val)return this.scrollHeight = 0;
+                let _tabsInfo = await getNodeMes('.po-tab',this);
+                this.scrollHeight = val - (_tabsInfo?.height ?? 0);
+            },
+            immediate: true
+        }
+    },
+    data(){
+        return {
+            tabList: [{ name: '门店' }, { name: '品牌' }, { name: '附近' }],
+            scrollHeight: 0,
+            list: [],// 瀑布流全部数据
+            list1: [],// 瀑布流第一列数据
+            list2: [],// 瀑布流第二列数据
+            leftGap: 10,
+            rightGap: 10,
+            columnGap: 10,
+        }
+    },
+    async mounted(){
+        
+    },
+    methods: {
+        clickTab(){
+
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    
+</style>

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    transpileDependencies: ['@climblee/uv-ui']
+}

yarn.lock

@@ -910,6 +910,11 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@climblee/uv-ui@^1.1.20":
+  version "1.1.20"
+  resolved "https://registry.npmmirror.com/@climblee/uv-ui/-/uv-ui-1.1.20.tgz#52edd6948c8b62284c89b611401a21f523cf5f54"
+  integrity sha512-jkyesHJsPJkF4Nap9ZmG1/ibKlxXA5M8+ntqKXwwloIsYSYL5SOKb0gyPj17aBOU1PkJpmeiZ8PwnTolhK2/HA==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"