Commit 91278412 authored by tangfh's avatar tangfh

uni-app 基础框架

parents
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
# uni-app 基础框架
自定义navBar + scroll-view下拉刷新、上拉加载 + 官方tabBar
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
try {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
uni.addInterceptor({
returnValue(res) {
if (!isPromise(res)) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => {
if (res[0]) {
reject(res[0]);
} else {
resolve(res[1]);
}
});
});
},
});
} catch (error) { }
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
\ No newline at end of file
{
"name" : "mishang666",
"appid" : "__UNI__77C5830",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "3"
}
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/dynamic/dynamic",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarTitleText": "动态"
}
}
,{
"path" : "pages/my/my",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarTitleText": "我的"
}
}
,{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarTitleText": "登录"
}
}
,{
"path" : "pages/seting/seting",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarTitleText": "设置"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationStyle": "custom",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"backgroundColor": "#FFFFFF",
"color": "#999999",
"selectedColor": "#333333",
"borderStyle": "black",
"height": "44",
"list": [
{
"iconPath": "static/icon_home_unselected.png",
"selectedIconPath": "static/icon_home.png",
"text": "首页",
"pagePath": "pages/index/index"
},
{
"iconPath": "static/icon_dynamic_unselected.png",
"selectedIconPath": "static/icon_dynamic.png",
"text": "动态",
"pagePath": "pages/dynamic/dynamic"
},
{
"iconPath": "static/icon_my_unselected.png",
"selectedIconPath": "static/icon_my.png",
"text": "我的",
"pagePath": "pages/my/my"
}
]
}
}
<template>
<view class="content">
<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" border="false" color="#FFFFFF" fixed="true">
<template v-slot:left>
<image class="image-fashion-logo" src="../../static/icon_fashion.png" mode="widthFix"
@click="onFashionLogoClick"></image>
</template>
</uni-nav-bar>
<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true"
lower-threshold="100" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore"
:refresher-triggered="refresherTriggered" :style="{'height':(scrollViewHeight+'px')}">
<view class="view-tmp2" v-for="(item,index) in items" :key="index"></view>
<uni-load-more :status="loadMoreViewStatus" :icon-size="16" v-if="loadMoreViewShow" />
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: '动态',
navBarHeight: 0,
scrollViewHeight: 1000,
refresherTriggered: false,
loadMoreViewShow: false,
// loadMoreViewContentText: {contentnomore:"到底啦~"},
loadMoreViewStatus: 'loading',
items: [{}, {}, {}, {}, {}, {}],
page: 1,
maxPage: 3
}
},
onLoad() {
uni.setTabBarBadge({
index: 0,
text: "6"
});
uni.showTabBarRedDot({
index: 2
})
var systemInfo = uni.getSystemInfoSync();
//scroll-view的高度 = 屏幕高度 -(顶部状态栏高度 + 导航栏高度) -(底部tabBar高度 + 底部安全区域高度)
this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
},
methods: {
onFashionLogoClick() {
uni.showToast({
title: "fashion"
})
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.page = 1;
_this.refresherTriggered = true;
setTimeout(() => {
_this.loadMoreViewShow = false;
_this.loadMoreViewStatus = "loading"
_this.items = [{}, {}, {}, {}, {}, {}];
_this.refresherTriggered = false;
}, 1000)
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
if (_this.page >= _this.maxPage) {
_this.loadMoreViewStatus = "noMore";
return;
}
_this.loadMoreViewStatus = "loading"
_this.page++;
setTimeout(() => {
_this.items = _this.items.concat([{}, {}, {}]);
_this.loadMoreViewShow = false;
}, 1000)
}
}
}
</script>
<style>
@import url('../../static/common.css');
</style>
\ No newline at end of file
<template>
<view class="content">
<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#FFFFFF" fixed="true">
<template v-slot:left>
<image class="image-fashion-logo" src="../../static/icon_fashion.png" mode="widthFix"
@click="onFashionLogoClick"></image>
</template>
</uni-nav-bar>
<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true"
@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
:style="{'height':(scrollViewHeight+'px')}">
<view class="view-tmp1" v-for="(item,index) in items" :key="index" @click="onItemClick(index)"></view>
<uni-load-more :status="loadMoreViewStatus" :icon-size="16" v-if="loadMoreViewShow" :content-text="loadMoreViewContentText" />
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: '首页',
navBarHeight: 0,
scrollViewHeight: 1000,
refresherTriggered: false,
loadMoreViewShow: false,
loadMoreViewContentText: {contentnomore:"到底啦~"},
loadMoreViewStatus: 'noMore',
items: [{},{},{},{},{},{}]
}
},
onLoad() {
uni.setTabBarBadge({
index: 0,
text: "6"
});
uni.showTabBarRedDot({
index: 2
})
var systemInfo = uni.getSystemInfoSync();
//scroll-view的高度 = 屏幕高度 -(顶部状态栏高度 + 导航栏高度) -(底部tabBar高度 + 底部安全区域高度)
this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
},
methods: {
onFashionLogoClick() {
uni.showToast({
title: "fashion"
})
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.refresherTriggered = true;
setTimeout(() => {
_this.refresherTriggered = false;
}, 1000)
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
// setTimeout(() => {
// _this.loadMoreViewShow = false;
// }, 1000)
},
onItemClick(index) {
uni.navigateTo({
url: '/pages/login/login?index='+index
})
}
}
}
</script>
<style>
@import url('../../static/common.css');
.image-fashion-logo {
width: 136rpx;
}
</style>
\ No newline at end of file
<template>
<view class="content">
<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
left-icon="left" left-text="放回" title="登录" @clickLeft="onNavBarLeftClick">
</uni-nav-bar>
<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true"
@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
:style="{'height':(scrollViewHeight+'px')}">
<view class="view-tmp4" v-for="(item,index) in items" :key="index"></view>
<uni-load-more :status="loadMoreViewStatus" :icon-size="16" v-if="loadMoreViewShow" :content-text="loadMoreViewContentText" />
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: '登录',
navBarHeight: 0,
scrollViewHeight: 1000,
refresherTriggered: false,
loadMoreViewShow: false,
loadMoreViewContentText: {contentnomore:"到底啦~"},
loadMoreViewStatus: 'noMore',
items: [{},{},{},{},{},{}]
}
},
onLoad() {
var systemInfo = uni.getSystemInfoSync();
//scroll-view的高度 = 屏幕高度 -(顶部状态栏高度 + 导航栏高度) -(底部tabBar高度 + 底部安全区域高度)
this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom);
},
methods: {
onNavBarLeftClick() {
uni.navigateBack();
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.refresherTriggered = true;
setTimeout(() => {
_this.refresherTriggered = false;
}, 1000)
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
// setTimeout(() => {
// _this.loadMoreViewShow = false;
// }, 1000)
}
}
}
</script>
<style>
@import url('../../static/common.css');
.image-fashion-logo {
width: 136rpx;
}
</style>
<template>
<view class="content">
<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" border="false" color="#FFFFFF" fixed="true">
<template v-slot:left>
<image class="image-fashion-logo" src="../../static/icon_fashion.png" mode="widthFix"
@click="onFashionLogoClick"></image>
</template>
</uni-nav-bar>
<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true"
@refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :refresher-triggered="refresherTriggered"
:style="{'height':(scrollViewHeight+'px')}">
<view class="view-tmp3" v-for="(item,index) in items" :key="index"></view>
<uni-load-more :status="loadMoreViewStatus" :icon-size="16" v-if="loadMoreViewShow" />
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: '我的',
navBarHeight: 0,
scrollViewHeight: 1000,
refresherTriggered: false,
loadMoreViewShow: false,
loadMoreViewStatus: 'more',
items: [{},{},{},{},{},{}]
}
},
onLoad() {
uni.setTabBarBadge({
index: 0,
text: "6"
});
uni.showTabBarRedDot({
index: 2
})
var systemInfo = uni.getSystemInfoSync();
//scroll-view的高度 = 屏幕高度 -(顶部状态栏高度 + 导航栏高度) -(底部tabBar高度 + 底部安全区域高度)
this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
},
methods: {
onFashionLogoClick() {
uni.showToast({
title: "fashion"
})
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.refresherTriggered = true;
setTimeout(() => {
_this.refresherTriggered = false;
}, 1000)
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
_this.loadMoreViewStatus = "more";
setTimeout(() => {
_this.loadMoreViewStatus = "loading";
}, 300)
setTimeout(() => {
_this.loadMoreViewShow = false;
}, 1300)
}
}
}
</script>
<style>
@import url('../../static/common.css');
</style>
\ No newline at end of file
<template>
<view class="content">
<text>设置</text>
</view>
</template>
<script>
export default {
data() {
return {
title: '设置'
}
},
methods: {
}
}
</script>
<style>
@import url('../../static/common.css');
</style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.view-status-bar {
width: 100%;
height: var(--status-bar-height);
}
.uni-navi-bar {
width: 100%;
color: #333333;
}
.view-tmp1 {
width: 100%;
height: 300rpx;
background-color: #FFCCCC;
margin-bottom: 10rpx;
}
.view-tmp2 {
width: 100%;
height: 300rpx;
background-color: #CCFFCC;
margin-bottom: 10rpx;
}
.view-tmp3 {
width: 100%;
height: 300rpx;
background-color: #99CCFF;
margin-bottom: 10rpx;
}
.view-tmp4 {
width: 100%;
height: 300rpx;
background-color: #CCCCCC;
margin-bottom: 10rpx;
}
.scroll-view {
height: 1000rpx;
}
\ No newline at end of file
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
## 1.3.5(2022-01-24)
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4(2022-01-24)
- 优化 size 支持其他单位
## 1.3.3(2022-01-17)
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
## 1.3.2(2021-12-01)
- 优化 示例可复制图标名称
## 1.3.1(2021-11-23)
- 优化 兼容旧组件 type 值
## 1.3.0(2021-11-19)
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7(2021-11-08)
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5(2021-05-12)
- 新增 组件示例地址
## 1.1.4(2021-02-05)
- 调整为uni_modules目录规范
This diff is collapsed.
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案,参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.3.3(2022-01-20)
- 新增 showText属性 ,是否显示文本
## 1.3.2(2022-01-19)
- 修复 nvue 平台下不显示文本的bug
## 1.3.1(2022-01-19)
- 修复 微信小程序平台样式选择器报警告的问题
## 1.3.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
## 1.2.1(2021-08-24)
- 新增 支持国际化
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8(2021-05-12)
- 新增 组件示例地址
## 1.1.7(2021-03-30)
- 修复 uni-load-more 在首页使用时,h5 平台报 'uni is not defined' 的 bug
## 1.1.6(2021-02-05)
- 调整为uni_modules目录规范
{
"uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了"
}
{
"uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了"
}
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.3.3",
"description": "LoadMore 组件,常用在列表里面,做滚动加载使用。",
"keywords": [
"uni-ui",
"uniui",
"加载更多",
"load-more"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
### LoadMore 加载更多
> **组件名:uni-load-more**
> 代码块: `uLoadMore`
用于列表中,做滚动加载使用,展示 loading 的各种状态。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.3.11(2023-03-29)
- 修复 自定义状态栏高度闪动BUG
## 1.3.10(2023-03-29)
- 修复 暗黑模式下边线颜色错误的bug
## 1.3.9(2022-10-13)
- 修复 条件编译错误的bug
## 1.3.8(2022-10-12)
- 修复 nvue 环境 fixed 为 true 的情况下,无法置顶的 bug
## 1.3.7(2022-08-11)
- 修复 nvue 环境下 fixed 为 true 的情况下,无法置顶的 bug
## 1.3.6(2022-06-30)
- 修复 组件示例中插槽用法无法显示内容的bug
## 1.3.5(2022-05-24)
- 新增 stat 属性 ,可开启统计title 上报 ,仅使用了title 属性且项目开启了uni统计生效
## 1.3.4(2022-01-24)
- 更新 组件示例
## 1.3.3(2022-01-24)
- 新增 left-width/right-width属性 ,可修改左右两侧的宽度
## 1.3.2(2022-01-18)
- 修复 在vue下,标题不垂直居中的bug
## 1.3.1(2022-01-18)
- 修复 height 属性类型错误
## 1.3.0(2022-01-18)
- 新增 height 属性,可修改组件高度
- 新增 dark 属性可可开启暗黑模式
- 优化 标题字数过多显示省略号
- 优化 插槽,插入内容可完全覆盖
## 1.2.1(2022-01-10)
- 修复 color 属性不生效的bug
## 1.2.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
## 1.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.11(2021-05-12)
- 新增 组件示例地址
## 1.0.10(2021-04-30)
- 修复 在nvue下fixed为true,宽度不能撑满的Bug
## 1.0.9(2021-04-21)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 1.0.8(2021-04-14)
- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
## 1.0.7(2021-02-25)
- 修复 easycom 下,找不到 uni-status-bar 的bug
## 1.0.6(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.0.5(2021-02-05)
- 调整为uni_modules目录规范
<template>
<view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
:style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }" >
<status-bar v-if="statusBar" />
<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
class="uni-navbar__header">
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
:style="{width:leftIconWidth}">
<slot name="left">
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
<uni-icons :color="themeColor" :type="leftIcon" size="20" />
</view>
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
v-if="leftText.length">
<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
</view>
</slot>
</view>
<view class="uni-navbar__header-container " @tap="onClickTitle">
<slot>
<view class="uni-navbar__header-container-inner" v-if="title.length>0">
<text class="uni-nav-bar-text uni-ellipsis-1"
:style="{color: themeColor }">{{ title }}</text>
</view>
</slot>
</view>
<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
:style="{width:rightIconWidth}">
<slot name="right">
<view v-if="rightIcon.length">
<uni-icons :color="themeColor" :type="rightIcon" size="22" />
</view>
<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
</view>
</slot>
</view>
</view>
</view>
<!-- #ifndef APP-NVUE -->
<view class="uni-navbar__placeholder" v-if="fixed">
<status-bar v-if="statusBar" />
<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
</view>
<!-- #endif -->
</view>
</template>
<script>
import statusBar from "./uni-status-bar.vue";
const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
/**
*
*
* NavBar 自定义导航栏
* @description 导航栏组件,主要用于头部导航
* @tutorial https://ext.dcloud.net.cn/plugin?id=52
* @property {Boolean} dark 开启黑暗模式
* @property {String} title 标题文字
* @property {String} leftText 左侧按钮文本
* @property {String} rightText 右侧按钮文本
* @property {String} leftIcon 左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性)
* @property {String} rightIcon 右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性)
* @property {String} color 图标和文字颜色
* @property {String} backgroundColor 导航栏背景颜色
* @property {Boolean} fixed = [true|false] 是否固定顶部
* @property {Boolean} statusBar = [true|false] 是否包含状态栏
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
* @property {Boolean} stat 是否开启统计标题上报
* @event {Function} clickLeft 左侧按钮点击时触发
* @event {Function} clickRight 右侧按钮点击时触发
* @event {Function} clickTitle 中间标题点击时触发
*/
export default {
name: "UniNavBar",
components: {
statusBar
},
emits: ['clickLeft', 'clickRight', 'clickTitle'],
props: {
dark: {
type: Boolean,
default: false
},
title: {
type: String,
default: ""
},
leftText: {
type: String,
default: ""
},
rightText: {
type: String,
default: ""
},
leftIcon: {
type: String,
default: ""
},
rightIcon: {
type: String,
default: ""
},
fixed: {
type: [Boolean, String],
default: false
},
color: {
type: String,
default: ""
},
backgroundColor: {
type: String,
default: ""
},
statusBar: {
type: [Boolean, String],
default: false
},
shadow: {
type: [Boolean, String],
default: false
},
border: {
type: [Boolean, String],
default: true
},
height: {
type: [Number, String],
default: 44
},
leftWidth: {
type: [Number, String],
default: 60
},
rightWidth: {
type: [Number, String],
default: 60
},
stat: {
type: [Boolean, String],
default: ''
}
},
computed: {
themeBgColor() {
if (this.dark) {
// 默认值
if (this.backgroundColor) {
return this.backgroundColor
} else {
return this.dark ? '#333' : '#FFF'
}
}
return this.backgroundColor || '#FFF'
},
themeColor() {
if (this.dark) {
// 默认值
if (this.color) {
return this.color
} else {
return this.dark ? '#fff' : '#333'
}
}
return this.color || '#333'
},
navbarHeight() {
return getVal(this.height)
},
leftIconWidth() {
return getVal(this.leftWidth)
},
rightIconWidth() {
return getVal(this.rightWidth)
}
},
mounted() {
if (uni.report && this.stat && this.title !== '') {
uni.report('title', this.title)
}
},
methods: {
onClickLeft() {
this.$emit("clickLeft");
},
onClickRight() {
this.$emit("clickRight");
},
onClickTitle() {
this.$emit("clickTitle");
}
}
};
</script>
<style lang="scss" scoped>
$nav-height: 44px;
.uni-nvue-fixed {
/* #ifdef APP-NVUE */
position: sticky;
/* #endif */
}
.uni-navbar {
// box-sizing: border-box;
}
.uni-nav-bar-text {
/* #ifdef APP-PLUS */
font-size: 34rpx;
/* #endif */
/* #ifndef APP-PLUS */
font-size: 14px;
/* #endif */
}
.uni-nav-bar-right-text {
font-size: 12px;
}
.uni-navbar__content {
position: relative;
// background-color: #fff;
// box-sizing: border-box;
background-color: transparent;
}
.uni-navbar__content_view {
// box-sizing: border-box;
}
.uni-navbar-btn-text {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: flex-start;
align-items: center;
line-height: 12px;
}
.uni-navbar__header {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
padding: 0 10px;
flex-direction: row;
height: $nav-height;
font-size: 12px;
}
.uni-navbar__header-btns {
/* #ifndef APP-NVUE */
overflow: hidden;
display: flex;
/* #endif */
flex-wrap: nowrap;
flex-direction: row;
width: 120rpx;
// padding: 0 6px;
justify-content: center;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-navbar__header-btns-left {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
width: 120rpx;
justify-content: flex-start;
align-items: center;
}
.uni-navbar__header-btns-right {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
// width: 150rpx;
// padding-right: 30rpx;
justify-content: flex-end;
align-items: center;
}
.uni-navbar__header-container {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
padding: 0 10px;
overflow: hidden;
}
.uni-navbar__header-container-inner {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 12px;
overflow: hidden;
// box-sizing: border-box;
}
.uni-navbar__placeholder-view {
height: $nav-height;
}
.uni-navbar--fixed {
position: fixed;
z-index: 998;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
/* #ifndef H5 */
left: 0;
right: 0;
/* #endif */
}
.uni-navbar--shadow {
box-shadow: 0 1px 6px #ccc;
}
.uni-navbar--border {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #eee;
}
.uni-ellipsis-1 {
overflow: hidden;
/* #ifndef APP-NVUE */
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
text-overflow: ellipsis;
/* #endif */
}
// 暗主题配置
.uni-dark {}
</style>
<template>
<view :style="{ height: statusBarHeight }" class="uni-status-bar">
<slot />
</view>
</template>
<script>
export default {
name: 'UniStatusBar',
data() {
return {
statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px'
}
}
}
</script>
<style lang="scss" >
.uni-status-bar {
// width: 750rpx;
height: 20px;
// height: var(--status-bar-height);
}
</style>
{
"id": "uni-nav-bar",
"displayName": "uni-nav-bar 自定义导航栏",
"version": "1.3.11",
"description": "自定义导航栏组件,主要用于头部导航。",
"keywords": [
"uni-ui",
"导航",
"导航栏",
"自定义导航栏"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## NavBar 导航栏
> **组件名:uni-nav-bar**
> 代码块: `uNavBar`
导航栏组件,主要用于头部导航。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const common_vendor = require("./common/vendor.js");
if (!Math) {
"./pages/index/index.js";
"./pages/dynamic/dynamic.js";
"./pages/my/my.js";
"./pages/login/login.js";
"./pages/seting/seting.js";
}
const _sfc_main = {
onLaunch: function() {
console.log("App Launch");
},
onShow: function() {
console.log("App Show");
},
onHide: function() {
console.log("App Hide");
}
};
const App = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "D:/develop/fashion/smallapp/mishang666/App.vue"]]);
function createApp() {
const app = common_vendor.createSSRApp(App);
return {
app
};
}
createApp().app.mount("#app");
exports.createApp = createApp;
{
"pages": [
"pages/index/index",
"pages/dynamic/dynamic",
"pages/my/my",
"pages/login/login",
"pages/seting/seting"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationStyle": "custom",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"backgroundColor": "#FFFFFF",
"color": "#999999",
"selectedColor": "#333333",
"borderStyle": "black",
"list": [
{
"iconPath": "static/icon_home_unselected.png",
"selectedIconPath": "static/icon_home.png",
"text": "首页",
"pagePath": "pages/index/index"
},
{
"iconPath": "static/icon_dynamic_unselected.png",
"selectedIconPath": "static/icon_dynamic.png",
"text": "动态",
"pagePath": "pages/dynamic/dynamic"
},
{
"iconPath": "static/icon_my_unselected.png",
"selectedIconPath": "static/icon_my.png",
"text": "我的",
"pagePath": "pages/my/my"
}
]
},
"usingComponents": {}
}
\ No newline at end of file
/*每个页面公共css */
page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}
\ No newline at end of file
This diff is collapsed.
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
data() {
return {
title: "动态",
navBarHeight: 0,
scrollViewHeight: 1e3,
refresherTriggered: false,
loadMoreViewShow: false,
// loadMoreViewContentText: {contentnomore:"到底啦~"},
loadMoreViewStatus: "loading",
items: [{}, {}, {}, {}, {}, {}],
page: 1,
maxPage: 3
};
},
onLoad() {
common_vendor.index.setTabBarBadge({
index: 0,
text: "6"
});
common_vendor.index.showTabBarRedDot({
index: 2
});
var systemInfo = common_vendor.index.getSystemInfoSync();
this.scrollViewHeight = systemInfo.screenHeight - (common_vendor.index.getSystemInfoSync().statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
},
methods: {
onFashionLogoClick() {
common_vendor.index.showToast({
title: "fashion"
});
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.page = 1;
_this.refresherTriggered = true;
setTimeout(() => {
_this.loadMoreViewShow = false;
_this.loadMoreViewStatus = "loading";
_this.items = [{}, {}, {}, {}, {}, {}];
_this.refresherTriggered = false;
}, 1e3);
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
if (_this.page >= _this.maxPage) {
_this.loadMoreViewStatus = "noMore";
return;
}
_this.loadMoreViewStatus = "loading";
_this.page++;
setTimeout(() => {
_this.items = _this.items.concat([{}, {}, {}]);
_this.loadMoreViewShow = false;
}, 1e3);
}
}
};
if (!Array) {
const _easycom_uni_nav_bar2 = common_vendor.resolveComponent("uni-nav-bar");
const _easycom_uni_load_more2 = common_vendor.resolveComponent("uni-load-more");
(_easycom_uni_nav_bar2 + _easycom_uni_load_more2)();
}
const _easycom_uni_nav_bar = () => "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.js";
const _easycom_uni_load_more = () => "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.js";
if (!Math) {
(_easycom_uni_nav_bar + _easycom_uni_load_more)();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: common_vendor.o((...args) => $options.onFashionLogoClick && $options.onFashionLogoClick(...args)),
b: common_vendor.sr("navBar", "765f387a-0"),
c: common_vendor.p({
["status-bar"]: "true",
border: "false",
color: "#FFFFFF",
fixed: "true"
}),
d: common_vendor.f($data.items, (item, index, i0) => {
return {
a: index
};
}),
e: $data.loadMoreViewShow
}, $data.loadMoreViewShow ? {
f: common_vendor.p({
status: $data.loadMoreViewStatus,
["icon-size"]: 16
})
} : {}, {
g: common_vendor.o((...args) => $options.onRefresh && $options.onRefresh(...args)),
h: common_vendor.o((...args) => $options.onLoadMore && $options.onLoadMore(...args)),
i: $data.refresherTriggered,
j: $data.scrollViewHeight + "px"
});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/develop/fashion/smallapp/mishang666/pages/dynamic/dynamic.vue"]]);
wx.createPage(MiniProgramPage);
{
"navigationBarTitleText": "动态",
"enablePullDownRefresh": false,
"usingComponents": {
"uni-nav-bar": "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar",
"uni-load-more": "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more"
}
}
\ No newline at end of file
<view class="content"><uni-nav-bar wx:if="{{c}}" u-s="{{['left']}}" u-r="navBar" class="uni-navi-bar r" u-i="765f387a-0" bind:__l="__l" u-p="{{c}}"><image class="image-fashion-logo" src="/static/icon_fashion.png" mode="widthFix" bindtap="{{a}}" slot="left"></image></uni-nav-bar><scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true" lower-threshold="100" bindrefresherrefresh="{{g}}" bindscrolltolower="{{h}}" refresher-triggered="{{i}}" style="{{'height:' + j}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="a" class="view-tmp2"></view><uni-load-more wx:if="{{e}}" u-i="765f387a-1" bind:__l="__l" u-p="{{f}}"/></scroll-view></view>
\ No newline at end of file
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.view-status-bar {
width: 100%;
height: var(--status-bar-height);
}
.uni-navi-bar {
width: 100%;
color: #333333;
}
.view-tmp1 {
width: 100%;
height: 300rpx;
background-color: #FFCCCC;
margin-bottom: 10rpx;
}
.view-tmp2 {
width: 100%;
height: 300rpx;
background-color: #CCFFCC;
margin-bottom: 10rpx;
}
.view-tmp3 {
width: 100%;
height: 300rpx;
background-color: #99CCFF;
margin-bottom: 10rpx;
}
.scroll-view {
height: 1000rpx;
}
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
data() {
return {
title: "首页",
navBarHeight: 0,
scrollViewHeight: 1e3,
refresherTriggered: false,
loadMoreViewShow: false,
loadMoreViewContentText: { contentnomore: "到底啦~" },
loadMoreViewStatus: "noMore",
items: [{}, {}, {}, {}, {}, {}]
};
},
onLoad() {
common_vendor.index.setTabBarBadge({
index: 0,
text: "6"
});
common_vendor.index.showTabBarRedDot({
index: 2
});
var systemInfo = common_vendor.index.getSystemInfoSync();
this.scrollViewHeight = systemInfo.screenHeight - (common_vendor.index.getSystemInfoSync().statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
},
methods: {
onFashionLogoClick() {
common_vendor.index.showToast({
title: "fashion"
});
},
onRefresh(e) {
console.log(e);
var _this = this;
_this.refresherTriggered = true;
setTimeout(() => {
_this.refresherTriggered = false;
}, 1e3);
},
onLoadMore(e) {
var _this = this;
_this.loadMoreViewShow = true;
},
onItemClick(index) {
common_vendor.index.navigateTo({
url: "/pages/login/login?index=" + index
});
}
}
};
if (!Array) {
const _easycom_uni_nav_bar2 = common_vendor.resolveComponent("uni-nav-bar");
const _easycom_uni_load_more2 = common_vendor.resolveComponent("uni-load-more");
(_easycom_uni_nav_bar2 + _easycom_uni_load_more2)();
}
const _easycom_uni_nav_bar = () => "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.js";
const _easycom_uni_load_more = () => "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.js";
if (!Math) {
(_easycom_uni_nav_bar + _easycom_uni_load_more)();
}
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: common_vendor.o((...args) => $options.onFashionLogoClick && $options.onFashionLogoClick(...args)),
b: common_vendor.sr("navBar", "3ef261a9-0"),
c: common_vendor.p({
["status-bar"]: "true",
border: false,
color: "#FFFFFF",
fixed: "true"
}),
d: common_vendor.f($data.items, (item, index, i0) => {
return {
a: index,
b: common_vendor.o(($event) => $options.onItemClick(index), index)
};
}),
e: $data.loadMoreViewShow
}, $data.loadMoreViewShow ? {
f: common_vendor.p({
status: $data.loadMoreViewStatus,
["icon-size"]: 16,
["content-text"]: $data.loadMoreViewContentText
})
} : {}, {
g: common_vendor.o((...args) => $options.onRefresh && $options.onRefresh(...args)),
h: common_vendor.o((...args) => $options.onLoadMore && $options.onLoadMore(...args)),
i: $data.refresherTriggered,
j: $data.scrollViewHeight + "px"
});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/develop/fashion/smallapp/mishang666/pages/index/index.vue"]]);
wx.createPage(MiniProgramPage);
{
"navigationBarTitleText": "首页",
"usingComponents": {
"uni-nav-bar": "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar",
"uni-load-more": "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more"
}
}
\ No newline at end of file
<view class="content"><uni-nav-bar wx:if="{{c}}" u-s="{{['left']}}" u-r="navBar" class="uni-navi-bar r" u-i="3ef261a9-0" bind:__l="__l" u-p="{{c}}"><image class="image-fashion-logo" src="/static/icon_fashion.png" mode="widthFix" bindtap="{{a}}" slot="left"></image></uni-nav-bar><scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true" bindrefresherrefresh="{{g}}" bindscrolltolower="{{h}}" refresher-triggered="{{i}}" style="{{'height:' + j}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="a" class="view-tmp1" bindtap="{{item.b}}"></view><uni-load-more wx:if="{{e}}" u-i="3ef261a9-1" bind:__l="__l" u-p="{{f}}"/></scroll-view></view>
\ No newline at end of file
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.view-status-bar {
width: 100%;
height: var(--status-bar-height);
}
.uni-navi-bar {
width: 100%;
color: #333333;
}
.view-tmp1 {
width: 100%;
height: 300rpx;
background-color: #FFCCCC;
margin-bottom: 10rpx;
}
.view-tmp2 {
width: 100%;
height: 300rpx;
background-color: #CCFFCC;
margin-bottom: 10rpx;
}
.view-tmp3 {
width: 100%;
height: 300rpx;
background-color: #99CCFF;
margin-bottom: 10rpx;
}
.scroll-view {
height: 1000rpx;
}
.image-fashion-logo {
width: 136rpx;
}
This diff is collapsed.
{
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"usingComponents": {
"uni-nav-bar": "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar",
"uni-load-more": "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more"
}
}
\ No newline at end of file
<view class="content"><uni-nav-bar wx:if="{{c}}" u-r="navBar" class="uni-navi-bar r" bindclickLeft="{{b}}" u-i="116aba97-0" bind:__l="__l" u-p="{{c}}"></uni-nav-bar><scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true" bindrefresherrefresh="{{g}}" bindscrolltolower="{{h}}" refresher-triggered="{{i}}" style="{{'height:' + j}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="a" class="view-tmp4"></view><uni-load-more wx:if="{{e}}" u-i="116aba97-1" bind:__l="__l" u-p="{{f}}"/></scroll-view></view>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
{
"navigationBarTitleText": "我的",
"enablePullDownRefresh": false,
"usingComponents": {
"uni-nav-bar": "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar",
"uni-load-more": "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more"
}
}
\ No newline at end of file
<view class="content"><uni-nav-bar wx:if="{{c}}" u-s="{{['left']}}" u-r="navBar" class="uni-navi-bar r" u-i="68a3f143-0" bind:__l="__l" u-p="{{c}}"><image class="image-fashion-logo" src="/static/icon_fashion.png" mode="widthFix" bindtap="{{a}}" slot="left"></image></uni-nav-bar><scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true" bindrefresherrefresh="{{g}}" bindscrolltolower="{{h}}" refresher-triggered="{{i}}" style="{{'height:' + j}}"><view wx:for="{{d}}" wx:for-item="item" wx:key="a" class="view-tmp3"></view><uni-load-more wx:if="{{e}}" u-i="68a3f143-1" bind:__l="__l" u-p="{{f}}"/></scroll-view></view>
\ No newline at end of file
This diff is collapsed.
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
data() {
return {
title: "设置"
};
},
methods: {}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/develop/fashion/smallapp/mishang666/pages/seting/seting.vue"]]);
wx.createPage(MiniProgramPage);
{
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false,
"usingComponents": {}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment