8 changed files with 284 additions and 0 deletions
-
1package.json
-
17src/pages.json
-
67src/subpackage/community/components/list_item.vue
-
58src/subpackage/community/components/tab_bar.vue
-
36src/subpackage/community/pages/index.vue
-
97src/subpackage/community/pages/modules/tab_pages/one.vue
-
3vue.config.js
-
5yarn.lock
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
transpileDependencies: ['@climblee/uv-ui'] |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue