116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { onPageScroll } from '@dcloudio/uni-app'
|
||
|
||
const MAX_SCROLL = 446
|
||
|
||
const cbNavBar = ref({})
|
||
const topIcon = reactive({
|
||
leftColor: '#ffffff',
|
||
rightColor: '#ffffff'
|
||
})
|
||
|
||
onPageScroll(e => {
|
||
cbNavBar.value?.updateScroll(e.scrollTop)
|
||
if (e.scrollTop > MAX_SCROLL - 220) {
|
||
topIcon.leftColor = '#000'
|
||
topIcon.rightColor = '#000'
|
||
} else {
|
||
topIcon.leftColor = '#ffffff'
|
||
topIcon.rightColor = '#ffffff'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="dynamic">
|
||
<nav-bar
|
||
ref="cbNavBar"
|
||
isTopBg
|
||
target-color="#f9f9f9"
|
||
:max-scroll="MAX_SCROLL"
|
||
>
|
||
<template #back>
|
||
<uni-icons
|
||
:color="topIcon.leftColor"
|
||
type="left"
|
||
size="24"
|
||
></uni-icons>
|
||
</template>
|
||
<template #right>
|
||
<uni-icons
|
||
:color="topIcon.rightColor"
|
||
type="camera"
|
||
size="24"
|
||
></uni-icons>
|
||
</template>
|
||
</nav-bar>
|
||
<view class="top-bg-img">
|
||
<image
|
||
src="https://wx4.sinaimg.cn/mw690/006i0nC8ly1hqugav3k6yj31o01o0aod.jpg"
|
||
mode="aspectFill"
|
||
class="img"
|
||
></image>
|
||
<!-- 用户信息 -->
|
||
<view class="user-info">
|
||
<text>名字</text>
|
||
<image
|
||
src="https://img2.baidu.com/it/u=3408192385,656358498&fm=253&app=138&f=JPEG?w=760&h=760"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 动态列表 -->
|
||
<view class="dynamic-list">
|
||
<view v-for="item in 4" class="list">
|
||
<image
|
||
src="https://img1.baidu.com/it/u=2645961124,1296922095&fm=253&app=138&f=JPEG?w=800&h=1530"
|
||
mode="aspectFill"
|
||
class="avatar"
|
||
></image>
|
||
<view class="content">
|
||
<text class="name">名字</text>
|
||
<text class="text">这是一条朋友圈的标题</text>
|
||
<view class="img-list">
|
||
<image
|
||
src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
|
||
mode="aspectFill"
|
||
class="item-img"
|
||
></image>
|
||
</view>
|
||
<!-- 地址 -->
|
||
<view class="address">
|
||
<text>19分钟前</text>
|
||
<text>重庆市渝北xxx寄街道</text>
|
||
</view>
|
||
<!-- 点赞评论 -->
|
||
<view class="like-box">
|
||
<view class="like">
|
||
<uni-icons
|
||
type="hand-up"
|
||
size="20"
|
||
color="#747474"
|
||
></uni-icons>
|
||
<text>22</text>
|
||
</view>
|
||
<uni-icons type="chat" size="20" color="#747474"></uni-icons>
|
||
</view>
|
||
<!-- 评论内容 -->
|
||
<view class="comment">
|
||
<view v-for="item in 3" :key="item" class="comment-item">
|
||
<text>Admin:</text>
|
||
<text>确实的很好，值得推荐的很好</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../styles/dynamic.scss';
|
||
</style>
|