This commit is contained in:
2025-03-13 03:10:06 +08:00
parent 243279d067
commit ebc8c7bb26
455 changed files with 52968 additions and 419 deletions
@@ -0,0 +1,8 @@
## 1.0.3(2021-12-29)
1.0.3新增一个组件调用,上下拉刷新改成z-paging
## 1.0.2(2021-08-29)
1.0.2 增加获取链接参数
## 1.0.1(2021-08-18)
1.0.1 更新依赖
## 1.0.0(2021-08-18)
1.0.0 上传页面
@@ -0,0 +1,211 @@
<!-- 滑动切换选项卡+吸顶演示(待完善) -->
<template>
<view class="content">
<z-paging ref="paging" @scroll="scroll" :scrollable="scrollable" :hide-empty-view="true"
:refresher-status.sync="refresherStatus" @query="queryList" :refresher-enabled="true">
<view class="top-view">
<image class="info-cover" @tap="fnMainBgPic" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5d36bb3d-8e98-4f00-ab8b-b018dc4f5dc6/17b0292c-8a63-4b7b-a6a6-724f416a9958.jpg"
mode="scaleToFill"></image>
<!-- 用户头像关注 -->
<view class="u-flex-wrap" style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
<view class="info-avatar">
<u-avatar :src="userinfo.avatar" size="135"></u-avatar>
</view>
<view style="margin-right: 50rpx;">
<u-tag v-if='showedit' text="编辑信息" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
<view v-if='!showedit' style="height: 45rpx;"></view>
</view>
</view>
<!-- 用户名 -->
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<text style="font-size: 32rpx;color: #111111;font-weight: bold;margin-right: 10rpx;">{{userinfo.nickname}}</text>
<u-icon :name="userinfo.gender===1?'man':'woman'" :color="userinfo.gender===1?'#4baed5':'#f5991e'" size="30"></u-icon>
</view>
<!-- 单位职务 -->
<view class="u-flex">
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<u-icon name="map-fill" size="32" color="#4baed5"></u-icon>
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.city}}</text>
</view>
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<u-icon name="man-add-fill" size="32" color="#4baed5"></u-icon>
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.jor}}</text>
</view>
</view>
<!-- 简介-->
<view style="font-size: 24rpx;color: #555555;margin:20rpx 50rpx;" v-if="userinfo.length!=0">
<u-tag v-if='membertype!=""' :text="membertype" mode="dark" shape="circle" bg-color="#4baed5" />
<text style="margin-right: 20rpx;">{{Information==''?'暂无简介':Information}}</text>
</view>
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;margin-bottom: 20rpx;" v-if="userinfo.length!=0">
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">粉丝</text>
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">关注</text>
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">点赞</text>
</view>
</view>
<view id="tabbar" class="paging-content" :style="'height:' + pageHeight + 'px'">
<!-- 小程序中直接修改组件style为position: sticky;无效,需要在组件外层套一层view -->
<view style="z-index: 100;position: sticky;top :0px;">
<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
swiperWidth="750"></u-tabs-swiper>
</view>
<swiper style="height: 100%;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item>
<swiper-list-item ref="swiperItem" :refresher="false" :scrollable="itemscrollable" :tabIndex="0" :currentIndex="swiperCurrent" :fixed="false" :auto="true" @setScrollable="setScrollable"></swiper-list-item>
</swiper-item>
<swiper-item>
</swiper-item>
</swiper>
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
userinfo:{
nickname:'zetank',
avatar:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b9e817e6-7ee6-461f-8e66-4bed243cbe98/ad090f5f-2a0f-4ea8-a8b5-fc8dafa4039e.jpg",
gender:1,
city:'广州',
jor:'职务',
good:{}
},
Information:'本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职 尽责,有耐心。具有亲和力,平易近人,善于与人沟通',
membertype:'',
showedit:true,//信息编辑按钮
refresherStatus: 0,
scrollTopMap: {},
// 页面高度
pageHeight: 0,
// header高度
headerHeight: 0,
scrollable: true,
itemscrollable:false,
change:false,
list: [{
name: '测试1'
}, {
name: '测试2'
}, {
name: '测试3'
}, {
name: '测试4'
}],
// 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值,表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
}
},
props:{
uid:{
type:String,
default:""
}
},
created() {
this.pageHeight = uni.getSystemInfoSync().windowHeight;
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.top-view').boundingClientRect(data => {
this.headerHeight = data.height;
}).exec();
})
},
methods: {
queryList() {
//触发了下拉刷新,通过当前tabIndex对应的列表下拉刷新
this.$refs.swiperItem.reload();
this.$refs.paging.complete([])
},
scroll(e) {
let scrollTop = e.detail.scrollTop;
//如果当前页面的scroll-view的scrollTop大于等于headerView的高度,则代表吸顶了
if (scrollTop < this.headerHeight-0.5) {
//还没吸顶
//禁止子组件的z-paging(scroll-view)滚动,当前页面的z-paging(scroll-view)允许滚动
this.scrollable = true;
// this.$refs.swiperItem[this.current].setScrollable(false);
this.itemscrollable=false
} else {
//吸顶了
//允许子组件的z-paging(scroll-view)滚动,当前页面的z-paging(scroll-view)禁止滚动
if(scrollTop >= this.headerHeight){
this.scrollable = false;
}
// this.$refs.swiperItem[this.current].setScrollable(true);
this.itemscrollable=true
}
},
setScrollable(scrollable) {
this.scrollable = scrollable;
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
this.$refs.paging.scrollToY(this.headerHeight)
},
// swiper-item左右移动,通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
// swiper滑动结束,分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// 修改用户背景封面图
fnMainBgPic() {
},
//编辑信息
UserEdit(){
uni.navigateTo({
url:""
})
},
}
}
</script>
<style>
.banner-view {
background-color: #007AFF;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.paging-content {
flex: 1;
display: flex;
flex-direction: column;
}
.swiper {
flex: 1;
}
.info-cover {
display: block;
width: 100%;
height: 260rpx;
}
.info-avatar {
position: absolute;
left: 0;
top: -56rpx;
margin-left: 50rpx;
}
</style>
@@ -0,0 +1,95 @@
{
"name" : "",
"appid" : "",
"description": "应用描述",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
/* 5+App特有相关 */
"app-plus": {
"usingComponents": true,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {
"OAuth": {},
"Payment": {},
"Push": {},
"Share": {},
"Speech": {},
"VideoPlayer": {}
},
/* 应用发布信息 */
"distribute": {
/* android打包配置 */
"android": {
"permissions": [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_MOCK_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.GET_TASKS\"/>",
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.READ_SMS\"/>",
"<uses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.SEND_SMS\"/>",
"<uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SMS\"/>",
"<uses-permission android:name=\"android.permission.RECEIVE_USER_PRESENT\"/>"
]
},
/* ios打包配置 */
"ios": {
"UIBackgroundModes": ["audio"]
},
/* SDK配置 */
"sdkConfigs": {
"speech": {
"ifly": {}
}
},
"orientation": ["portrait-primary"]
}
},
/* 快应用特有相关 */
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
},
"h5": {
"template": "template.h5.html",
"router": {
"mode": "history",
"base": "/h5/"
}
}
}
@@ -0,0 +1,80 @@
{
"id": "zetank-personalpage",
"displayName": "zetank-personalpage 个人主页",
"version": "1.0.3",
"description": "zetank-personalpage 个人主页",
"keywords": [
"个人主页"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"uni-app前端模板",
"前端页面模板"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": ["z-paging"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
}
@@ -0,0 +1,230 @@
<template>
<view>
<!-- 后台按钮组件 -->
<!-- <zetank-backBar textcolor="#000" :showLeft="true" :showTitle="false" navTitle='标题'></zetank-backBar> -->
<!-- 用户背景封面 -->
<z-paging ref="paging" :fixed="true" @scroll="scroll" @query="queryData" :hide-empty-view="true" >
<image class="info-cover" @tap="fnMainBgPic" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5d36bb3d-8e98-4f00-ab8b-b018dc4f5dc6/17b0292c-8a63-4b7b-a6a6-724f416a9958.jpg"
mode="scaleToFill"></image>
<!-- 用户头像关注 -->
<view class="u-flex-wrap" style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
<view class="info-avatar">
<!-- <image
src="https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/static/center/avatar.png?expire_at=1741142218&er_sign=2f723854c2a07dcb5571d2ede5458f7f"
style="width: 135rpx;height: 135rpx;border-radius: 50%;"></image> -->
<!-- <u-avatar :src="userinfo.avatar" size="135"></u-avatar> -->
</view>
<view style="margin-right: 50rpx;">
<!-- <u-tag v-if='showedit' text="编辑信息" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" /> -->
<view v-if='!showedit' style="height: 45rpx;"></view>
</view>
</view>
<!-- 用户名 -->
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<text style="font-size: 32rpx;color: #111111;font-weight: bold;margin-right: 10rpx;">{{userinfo.nickname}}</text>
<!-- <u-icon :name="userinfo.gender===1?'man':'woman'" :color="userinfo.gender===1?'#4baed5':'#f5991e'" size="30"></u-icon> -->
</view>
<!-- 单位职务 -->
<view class="u-flex">
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<!-- <u-icon name="map-fill" size="32" color="#4baed5"></u-icon> -->
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.city}}</text>
</view>
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;" v-if="userinfo.length!=0">
<!-- <u-icon name="man-add-fill" size="32" color="#4baed5"></u-icon> -->
<text style="font-size: 24rpx;color: #555555;margin-left: 10rpx;">{{userinfo.jor}}</text>
</view>
</view>
<!-- 简介-->
<view style="font-size: 24rpx;color: #555555;margin:20rpx 50rpx;" v-if="userinfo.length!=0">
<!-- <u-tag v-if='membertype!=""' :text="membertype" mode="dark" shape="circle" bg-color="#4baed5" /> -->
<text style="margin-right: 20rpx;">{{Information==''?'暂无简介':Information}}</text>
</view>
<view style="display: flex;align-items: center;margin-left: 50rpx;margin-top: 20rpx;margin-bottom: 20rpx;" v-if="userinfo.length!=0">
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">粉丝</text>
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">关注</text>
<text style="font-size: 32rpx;font-weight: bold;color: #555555;margin-right: 18rpx;">{{userinfo.good.length || 0}}</text><text style="font-size: 24rpx;color: gray;margin-right: 28rpx;">点赞</text>
</view>
<!-- 选择导航 -->
<view v-if="isFixed" style="height: 90rpx;line-height: 90rpx;background-color: white;margin-bottom: 18rpx;"></view>
<view id="tabbar" :class="isFixed?'tabbar-fixed':''" style="border-bottom:18rpx #f8f8f8 solid ;align-items: stretch;height: 90rpx;line-height: 90rpx;background-color: white;margin-bottom: 18rpx; display: flex;flex-direction: row;justify-content: space-around;">
<view style="font-size: 32rpx;font-weight: bold;text-align: center;width: 128rpx;" :class="current == 0?'tabbarsh':'notabbarsh'" @tap="fnBarClick(0)">导航一</view>
<view style="font-size: 32rpx;font-weight: bold;text-align: center;width: 128rpx;" :class="current == 1?'tabbarsh':'notabbarsh'" @tap="fnBarClick(1)">导航二</view>
</view>
<!-- 导航显示内容 -->
<view style="margin-top: 2500rpx;">
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
uid:'',
userinfo:{
nickname:'zetank',
avatar:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b9e817e6-7ee6-461f-8e66-4bed243cbe98/ad090f5f-2a0f-4ea8-a8b5-fc8dafa4039e.jpg",
gender:1,
city:'广州',
jor:'职务',
good:{}
},
Information:'本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职 尽责,有耐心。具有亲和力,平易近人,善于与人沟通',
membertype:'',
showedit:true,//信息编辑按钮
// 是否固定导航
isFixed: false,
// 距离顶部达到导航距离
topNum: 0,
// 选中
current: 0,
// 导航距离顶部
tabbarTop: 0,
clickRefresh: false,
// 刷新间隔
timeOutUserInfo: 0,
// 激活顶部导航关联页状态
status: {
publish: true,
praise: false,
},
}
},
onLoad(option) {
this.uid = option.uid
// 等待0.3秒页面渲染,$nextTick使用不能准确
setTimeout(() => {
uni.hideLoading()
// 获取导航条距顶部高度
this.setTabbarTop();
}, 300);
let uid = uni.getStorageSync('uid')
if(uid === option.uid){
this.showedit=true
}
},
methods: {
// 滚动事件 (需在up配置onScroll:true才生效)
scroll(e) {
this.topNum = e.detail.scrollTop
if (e.detail.scrollTop >= this.tabbarTop) {
this.isFixed = true // 显示悬浮菜单
} else {
this.isFixed = false // 隐藏悬浮菜单
}
},
// 修改用户背景封面图
fnMainBgPic() {
},
//编辑信息
UserEdit(){
uni.navigateTo({
url:""
})
},
/// 顶部导航选项点击
fnBarClick(current) {
// console.log(current);
// 是否当前项点击
if (this.current == current) {
this.timeOutUserInfo += 1;
// 是否为刷新值和连续点击2次
// console.log('timeOutUserInfo',this.timeOutUserInfo);
if (!this.clickRefresh && this.timeOutUserInfo >= 2) {
// 刷新值开
// console.log('点击了两下');
this.clickRefresh = true;
// 获取新数据
// 定时器重置
this.timeOutUserInfo = setTimeout(() => {
// 清除定时器
// console.log('5秒后清除定时器');
clearTimeout(this.timeOutUserInfo)
// 连续触发记录重置
this.timeOutUserInfo = 0;
// 5秒后刷新值关
this.clickRefresh = false;
}, 5000);
}
} else {
// 改变顶部导航选中
this.current = current;
// 首次选中激活顶部导航关联页状态
if (!this.status.praise && this.current == 1) this.status.praise = true;
// 获取新数据
// 清除定时器
clearTimeout(this.timeOutUserInfo)
// 连续触发记录重置
this.timeOutUserInfo = 0;
// 刷新值关
this.clickRefresh = false;
}
// 滚动上滑
this.$refs.paging.scrollToY(this.tabbarTop);
// console.log("滚动上滑");
},
// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的数值是最精确的)
setTabbarTop() {
let view = uni.createSelectorQuery().in(this).select('#tabbar');
view.boundingClientRect(data => {
// 到屏幕顶部的距离
this.tabbarTop = data.top
}).exec();
},
queryData(){
// this.$refs.paging.reload();
this.$refs.paging.complete([])
}
}
}
</script>
<style>
.info-cover {
display: block;
width: 100%;
height: 260rpx;
}
.info-avatar {
position: absolute;
left: 0;
top: -56rpx;
margin-left: 50rpx;
}
.tabbarsh {
color: #4baed5;
border-bottom: 4rpx #4baed5 solid;
}
.notabbarsh {
color: #555555;
}
.tabbar-fixed {
position: fixed;
left: 0;
right: 0;
/* #ifdef H5 */
top: 0rpx;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
z-index: 300;
background: #FFFFFF;
margin-bottom: 0;
border-bottom: 2rpx #EEEEEE solid;
}
</style>
+34
View File
@@ -0,0 +1,34 @@
# zetank-personalpage
>常用的个人页面,页面带有编辑信息按钮、头像、昵称、性别等数据显示
>页面使用uview,使用前请自己安装插件[uview](https://www.uviewui.com/components/install.html)
>页面依赖mescroll,使用前安装插件[mescroll](http://www.mescroll.com/api.html)
>页面使用后退按钮组件[zetank-backBar](https://ext.dcloud.net.cn/plugin?name=zetank-backBar)
###安装
下载组件到项目即可,本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范
###使用
1.配置pages.json页面
```json
{
"path" : "uni_modules/zetank-personalpage/pages/personalpage/personalpage",
"style" :
{
"navigationBarTitleText": "个人主页",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"app-plus" : {
"bounce" : "none" // 取消APP端iOS回弹,避免与下拉刷新冲突 (可统一配在 'globalStyle')
},
"mp-alipay":{"allowsBounceVertical":"NO"} // 取消支付宝和钉钉小程序的iOS回弹,避免与下拉刷新冲突 (可统一配在 'globalStyle')
}
}
```