zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化（包含登录模块）

Browse Source
This commit is contained in:
始于初见
2024-03-29 17:37:48 +08:00
commit 1bcb13ce7a
1306 changed files with 152772 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
pages/extUI/nav-bar/nav-bar.nvue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view class="container">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
title="自定义导航栏" @clickLeft="back" />
<uni-card is-full :isShadow="false">
<text
class="uni-h6">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text>
</uni-card>
<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar title="标题" />
</view>
</uni-section>
<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" />
</view>
</uni-section>
<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
</view>
</uni-section>
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" />
</view>
</uni-section>
<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line"
style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回"
rightText="设置" title="自定义颜色" />
</view>
</view>
</uni-section>
<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<view class="box-bg">
<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置"
title="自定义高度" />
</view>
</view>
</uni-section>
<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
<view class="box-bg">
<uni-nav-bar>
<template v-slot:left>
<view class="city">
<view>
<text class="uni-nav-bar-text">{{ city }}</text>
</view>
<uni-icons type="arrowdown" color="#666" size="18" />
</view>
</template>
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
@confirm="confirm" />
</view>
<template v-slot:right>
<view class="city">
搜索
</view>
</template>
</uni-nav-bar>
</view>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
city: '北京'
}
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
search() {
uni.showToast({
title: '搜索'
})
},
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
confirm() {
uni.showToast({
title: '搜索'
})
}
},
onPullDownRefresh() {
console.log('onPullDownRefresh')
setTimeout(function() {
uni.stopPullDownRefresh()
console.log('stopPullDownRefresh')
}, 1000)
}
}
</script>
<style lang="scss">
$nav-height: 30px;
.box-bg {
background-color: #F5F5F5;
padding: 5px 0;
}
.city {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
// width: 160rpx;
margin-left: 4px;
}
.input-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 500rpx;
flex: 1;
background-color: #f8f8f8;
height: $nav-height;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: $nav-height;
}
.input-uni-icon {
line-height: $nav-height;
}
.nav-bar-input {
height: $nav-height;
line-height: $nav-height;
/* #ifdef APP-PLUS-NVUE */
width: 370rpx;
/* #endif */
padding: 0 5px;
font-size: 12px;
background-color: #f8f8f8;
}
</style>