renguanyu111
4 years ago
commit
b6df4bb62f
481 changed files with 52719 additions and 0 deletions
@ -0,0 +1,16 @@ |
|||
{ // 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" |
|||
}, |
|||
"h5" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"type" : "uniCloud" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<script> |
|||
export default { |
|||
onLaunch: function() { |
|||
}, |
|||
onShow: function() { |
|||
|
|||
}, |
|||
onHide: function() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*每个页面公共css */ |
|||
@import "@/uni_modules/uview-ui/index.scss"; |
|||
@import "common/demo.scss"; |
|||
|
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
MIT License |
|||
|
|||
Copyright (c) 2021 www.uviewui.com |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all |
|||
copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|||
SOFTWARE. |
|||
@ -0,0 +1,101 @@ |
|||
<p align="center"> |
|||
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> |
|||
</p> |
|||
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView 2.0</h3> |
|||
<h3 align="center">多平台快速开发的UI框架</h3> |
|||
|
|||
[](https://github.com/umicro/uView2.0) |
|||
[](https://github.com/umicro/uView2.0) |
|||
[](https://github.com/umicro/uView2.0/issues) |
|||
[](https://uviewui.com) |
|||
[](https://gitee.com/umicro/uView2.0/releases) |
|||
[](https://en.wikipedia.org/wiki/MIT_License) |
|||
|
|||
## 一起推动uView发展 |
|||
|
|||
uView正在参与开源中国的“年度最佳项目”评选，目前投票进入了最后一个阶段（之前投过票的现在也可以投票）， |
|||
我们不分昼夜的努力，恳请同学们能为我们投一票，uView来源于社区，也希望社区能一起推动它的发展，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
|||
|
|||
## 说明 |
|||
|
|||
uView UI，是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水 |
|||
|
|||
## [官方文档：https://uviewui.com](https://uviewui.com) |
|||
|
|||
### 官方1群：1042987248（已满） |
|||
### 官方2群：249718512（已满） |
|||
### 官方3群：1129077272（已满） |
|||
### 官方4群：1084514613（已满） |
|||
### 官方5群：863820668（已满） |
|||
### 官方6群：745721078（已满） |
|||
### 官方7群：627867855（已满） |
|||
### 官方8群：496409492（已满） |
|||
### 官方9群：828504448（已满） |
|||
### 官方10群：232041042（已满） |
|||
### [点击加11群交流反馈：364463526](https://jq.qq.com/?_wv=1027&k=mCxS3TGY) |
|||
|
|||
## 特性 |
|||
|
|||
- 全面兼容nvue，原生渲染，高性能 |
|||
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序 |
|||
- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用 |
|||
- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨 |
|||
- 众多的常用页面和布局，让您专注逻辑，事半功倍 |
|||
- 详尽的文档支持，现代化的演示效果 |
|||
- 按需引入，精简打包体积 |
|||
|
|||
|
|||
## 预览 |
|||
|
|||
您可以通过**微信**扫码，查看最佳的演示效果。 |
|||
<br> |
|||
<br> |
|||
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" > |
|||
|
|||
|
|||
## 链接 |
|||
|
|||
- [官方文档](https://www.uviewui.com/) |
|||
- [更新日志](https://www.uviewui.com/components/changelog.html) |
|||
- [升级指南](https://www.uviewui.com/components/changeGuide.html) |
|||
- [关于我们](https://www.uviewui.com/cooperation/about.html) |
|||
|
|||
## 交流反馈 |
|||
|
|||
欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html) |
|||
|
|||
## 关于PR |
|||
|
|||
> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uView2.0是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。 |
|||
> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！ |
|||
|
|||
## 安装 |
|||
|
|||
#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593) |
|||
|
|||
## 快速上手 |
|||
|
|||
请通过[官网安装文档](https://v2.uviewui.com/components/install.html)了解更详细的内容 |
|||
|
|||
## 使用方法 |
|||
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。 |
|||
|
|||
```html |
|||
<template> |
|||
<u-button text="按钮"></u-button> |
|||
</template> |
|||
``` |
|||
|
|||
请通过[快速上手](https://v2.uviewui.com/components/quickstart.html)了解更详细的内容 |
|||
|
|||
|
|||
## 捐赠uView的研发 |
|||
|
|||
uView文档内容和框架源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。 |
|||
|
|||
<img src="https://uviewui.com/common/wechat.png" width="220" > |
|||
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" > |
|||
|
|||
## 版权信息 |
|||
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。 |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
const { http } = uni.$u |
|||
// 获取菜单
|
|||
export const fetchMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config) |
|||
@ -0,0 +1,3 @@ |
|||
module.exports = { |
|||
baseUrl: 'https://api.youzixy.com' |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
.u-block{ |
|||
padding: 14px; |
|||
&__section{ |
|||
margin-bottom:10px; |
|||
} |
|||
&__title { |
|||
margin-top:10px; |
|||
font-size: 15px; |
|||
color: $u-content-color; |
|||
margin-bottom:10px; |
|||
} |
|||
&__flex{ |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
} |
|||
} |
|||
|
|||
// 使用了cell组件的icon图片样式 |
|||
.u-cell-icon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.u-page { |
|||
padding: 15px 15px 40px 15px; |
|||
} |
|||
|
|||
.u-demo-block { |
|||
flex: 1; |
|||
margin-bottom: 23px; |
|||
|
|||
&__content { |
|||
@include flex(column); |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 14px; |
|||
color: rgb(143, 156, 162); |
|||
margin-bottom: 8px; |
|||
@include flex; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,7 @@ |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
uni.$u.props.gap.bgColor = '#f3f4f6' |
|||
uni.$u.props.gap.height = '10' |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="nav-wrap"> |
|||
<view class="nav-title"> |
|||
<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/common/logo.png" width="70px" |
|||
height="70px" /> |
|||
<view class="nav-info"> |
|||
<view class="nav-info__title" @tap="jumpToWx"> |
|||
<text class="nav-info__title__text">uView {{version}}</text> |
|||
<!-- #ifdef MP-WEIXIN --> |
|||
<!-- uni-app不支持text内部的text组件的tap事件，所以放到外部响应tap --> |
|||
<text class="nav-info__title__jump">查看1.x演示</text> |
|||
<!-- #endif --> |
|||
</view> |
|||
<text class="nav-slogan">多平台快速开发的UI框架</text> |
|||
</view> |
|||
</view> |
|||
<text class="nav-desc">{{desc}}</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
desc: String, |
|||
title: String, |
|||
}, |
|||
data() { |
|||
return { |
|||
version: uni.$u.config.v |
|||
} |
|||
}, |
|||
methods: { |
|||
jumpToWx() { |
|||
// #ifdef MP-WEIXIN |
|||
uni.navigateToMiniProgram({ |
|||
appId: 'wx3be833c4a263e0c2' |
|||
}) |
|||
// #endif |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav-wrap { |
|||
padding: 15px; |
|||
position: relative; |
|||
} |
|||
|
|||
.lang { |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 15px; |
|||
} |
|||
|
|||
.nav-title { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.nav-info { |
|||
margin-left: 15px; |
|||
|
|||
&__title { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
&__text { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
color: $u-main-color; |
|||
font-size: 25px; |
|||
font-weight: bold; |
|||
text-align: left; |
|||
} |
|||
|
|||
&__jump { |
|||
font-size: 12px; |
|||
color: $u-primary; |
|||
font-weight: normal; |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.logo { |
|||
width: 70px; |
|||
height: 70px; |
|||
/* #ifndef APP-NVUE */ |
|||
height: auto; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.nav-slogan { |
|||
color: $u-tips-color; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.nav-desc { |
|||
margin-top: 10px; |
|||
font-size: 14px; |
|||
color: $u-content-color; |
|||
line-height: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
import Vue from 'vue' |
|||
import App from './App' |
|||
|
|||
// vuex
|
|||
import store from './store' |
|||
|
|||
// 引入全局uView
|
|||
import uView from '@/uni_modules/uview-ui' |
|||
|
|||
import mixin from './common/mixin' |
|||
|
|||
Vue.prototype.$store = store |
|||
|
|||
Vue.config.productionTip = false |
|||
|
|||
App.mpType = 'app' |
|||
Vue.use(uView) |
|||
|
|||
// #ifdef MP
|
|||
// 引入uView对小程序分享的mixin封装
|
|||
const mpShare = require('@/uni_modules/uview-ui/libs/mixin/mpShare.js') |
|||
Vue.mixin(mpShare) |
|||
// #endif
|
|||
|
|||
Vue.mixin(mixin) |
|||
|
|||
const app = new Vue({ |
|||
store, |
|||
...App |
|||
}) |
|||
|
|||
// 引入请求封装
|
|||
require('./util/request/index')(app) |
|||
|
|||
app.$mount() |
|||
@ -0,0 +1,153 @@ |
|||
{ |
|||
"name" : "auditDetails", |
|||
"appid" : "", |
|||
"description": "多平台快速开发的UI框架", |
|||
"versionName": "1.0.0", |
|||
"versionCode": 1, |
|||
"transformPx": false, |
|||
"app-plus": { |
|||
"optimization": { |
|||
"subPackages": true |
|||
}, |
|||
"safearea": { |
|||
"bottom": { |
|||
"offset": "none" |
|||
} |
|||
}, |
|||
"splashscreen": { |
|||
"alwaysShowBeforeRender": true, |
|||
"waiting": true, |
|||
"autoclose": true, |
|||
"delay": 0 |
|||
}, |
|||
"usingComponents": true, |
|||
"nvueCompiler": "uni-app", |
|||
"compilerVersion": 3, |
|||
"modules": { |
|||
"Webview-x5": {} |
|||
}, |
|||
"distribute": { |
|||
"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.READ_CONTACTS\"/>", |
|||
"<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.WRITE_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|||
"<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.CALL_PHONE\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
], |
|||
"abiFilters": [ |
|||
"armeabi-v7a", |
|||
"arm64-v8a" |
|||
] |
|||
}, |
|||
"ios": { |
|||
"idfa": false |
|||
}, |
|||
"sdkConfigs": { |
|||
"ad": {} |
|||
}, |
|||
"icons": { |
|||
"android": { |
|||
"hdpi": "unpackage/res/icons/72x72.png", |
|||
"xhdpi": "unpackage/res/icons/96x96.png", |
|||
"xxhdpi": "unpackage/res/icons/144x144.png", |
|||
"xxxhdpi": "unpackage/res/icons/192x192.png" |
|||
}, |
|||
"ios": { |
|||
"appstore": "unpackage/res/icons/1024x1024.png", |
|||
"ipad": { |
|||
"app": "unpackage/res/icons/76x76.png", |
|||
"app@2x": "unpackage/res/icons/152x152.png", |
|||
"notification": "unpackage/res/icons/20x20.png", |
|||
"notification@2x": "unpackage/res/icons/40x40.png", |
|||
"proapp@2x": "unpackage/res/icons/167x167.png", |
|||
"settings": "unpackage/res/icons/29x29.png", |
|||
"settings@2x": "unpackage/res/icons/58x58.png", |
|||
"spotlight": "unpackage/res/icons/40x40.png", |
|||
"spotlight@2x": "unpackage/res/icons/80x80.png" |
|||
}, |
|||
"iphone": { |
|||
"app@2x": "unpackage/res/icons/120x120.png", |
|||
"app@3x": "unpackage/res/icons/180x180.png", |
|||
"notification@2x": "unpackage/res/icons/40x40.png", |
|||
"notification@3x": "unpackage/res/icons/60x60.png", |
|||
"settings@2x": "unpackage/res/icons/58x58.png", |
|||
"settings@3x": "unpackage/res/icons/87x87.png", |
|||
"spotlight@2x": "unpackage/res/icons/80x80.png", |
|||
"spotlight@3x": "unpackage/res/icons/120x120.png" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"quickapp": {}, |
|||
"mp-weixin": { |
|||
"appid": "", |
|||
"setting": { |
|||
"urlCheck": false, |
|||
"es6": false, |
|||
"minified": false, |
|||
"postcss": false |
|||
}, |
|||
"optimization": { |
|||
"subPackages": true |
|||
}, |
|||
"usingComponents": true |
|||
}, |
|||
"mp-alipay": { |
|||
"usingComponents": true, |
|||
"component2": true |
|||
}, |
|||
"mp-qq": { |
|||
"optimization": { |
|||
"subPackages": true |
|||
}, |
|||
"appid": "15646153" |
|||
}, |
|||
"mp-baidu": { |
|||
"usingComponents": true, |
|||
"appid": "" |
|||
}, |
|||
"mp-toutiao": { |
|||
"usingComponents": true, |
|||
"appid": "" |
|||
}, |
|||
"h5": { |
|||
"template": "template.h5.html", |
|||
"router": { |
|||
"mode": "history", |
|||
"base": "" |
|||
}, |
|||
"optimization": { |
|||
"treeShaking": { |
|||
"enable": false |
|||
} |
|||
}, |
|||
"title": "uView UI", |
|||
"sdkConfigs": { |
|||
"maps": { |
|||
"qqmap": { |
|||
"key": "" |
|||
} |
|||
} |
|||
}, |
|||
"domain": "" |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"id": "uview-ui", |
|||
"scripts": { |
|||
"test": "eslint . --fix" |
|||
}, |
|||
"dependencies": {}, |
|||
"devDependencies": { |
|||
"eslint": "^8.2.0", |
|||
"eslint-config-airbnb": "^19.0.0" |
|||
} |
|||
} |
|||
@ -0,0 +1,432 @@ |
|||
{ |
|||
// "condition": { //模式配置，仅开发期间生效 |
|||
// "current": 0, //当前激活的模式(list 的索引项) |
|||
// "list": [{ |
|||
// "name": "test", //模式名称 |
|||
// "path": "pages/componentsA/test/test", //启动页面，必选 |
|||
// "query": "" //启动参数，在页面的onLoad函数里面得到 |
|||
// }] |
|||
// }, |
|||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/index/index" |
|||
}, |
|||
{ |
|||
"path": "pages/index/tabControl-tag" |
|||
} |
|||
|
|||
], |
|||
"subPackages": [{ |
|||
"root": "pages/componentsA", |
|||
"pages": [ |
|||
// 过渡动画 |
|||
{ |
|||
"path": "transition/transition", |
|||
"style": { |
|||
"navigationBarTitleText": "过渡动画" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "test/test", |
|||
"style": { |
|||
"navigationBarTitleText": "测试" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "icon/icon", |
|||
"style": { |
|||
"navigationBarTitleText": "图标" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "cell/cell", |
|||
"style": { |
|||
"navigationBarTitleText": "单元格" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "line/line", |
|||
"style": { |
|||
"navigationBarTitleText": "线条" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "image/image", |
|||
"style": { |
|||
"navigationBarTitleText": "图片" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "link/link", |
|||
"style": { |
|||
"navigationBarTitleText": "超链接" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "button/button", |
|||
"style": { |
|||
"navigationBarTitleText": "按钮" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "loading-icon/loading-icon", |
|||
"style": { |
|||
"navigationBarTitleText": "加载中图标" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "overlay/overlay", |
|||
"style": { |
|||
"navigationBarTitleText": "遮罩层", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "loading-page/loading-page", |
|||
"style": { |
|||
"navigationBarTitleText": "加载页", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "popup/popup", |
|||
"style": { |
|||
"navigationBarTitleText": "弹窗", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "swipeAction/swipeAction", |
|||
"style": { |
|||
"navigationBarTitleText": "滑动单元格" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "sticky/sticky", |
|||
"style": { |
|||
"navigationBarTitleText": "吸顶" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "radio/radio", |
|||
"style": { |
|||
"navigationBarTitleText": "单选框" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "checkbox/checkbox", |
|||
"style": { |
|||
"navigationBarTitleText": "复选框" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "empty/empty", |
|||
"style": { |
|||
"navigationBarTitleText": "内容为空" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "backtop/backtop", |
|||
"style": { |
|||
"navigationBarTitleText": "返回顶部" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "divider/divider", |
|||
"style": { |
|||
"navigationBarTitleText": "分割线" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "rate/rate", |
|||
"style": { |
|||
"navigationBarTitleText": "评分" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "gap/gap", |
|||
"style": { |
|||
"navigationBarTitleText": "间隔槽" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "grid/grid", |
|||
"style": { |
|||
"navigationBarTitleText": "宫格" |
|||
} |
|||
} |
|||
] |
|||
}, { |
|||
"root": "pages/componentsB", |
|||
"pages": [{ |
|||
"path": "dropdown/dropdown", |
|||
"style": { |
|||
"navigationBarTitleText": "下拉菜单" |
|||
} |
|||
}, { |
|||
"path": "actionSheet/actionSheet", |
|||
"style": { |
|||
"navigationBarTitleText": "上拉菜单", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "parse/parse", |
|||
"style": { |
|||
"navigationBarTitleText": "富文本解析器" |
|||
} |
|||
}, { |
|||
"path": "parse/jump", |
|||
"style": { |
|||
"navigationBarTitleText": "内部链接" |
|||
} |
|||
}, { |
|||
"path": "toast/toast", |
|||
"style": { |
|||
"navigationBarTitleText": "提示消息" |
|||
} |
|||
}, { |
|||
"path": "keyboard/keyboard", |
|||
"style": { |
|||
"navigationBarTitleText": "键盘", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "slider/slider", |
|||
"style": { |
|||
"navigationBarTitleText": "滑动选择器" |
|||
} |
|||
}, { |
|||
"path": "upload/upload", |
|||
"style": { |
|||
"navigationBarTitleText": "上传" |
|||
} |
|||
}, { |
|||
"path": "notify/notify", |
|||
"style": { |
|||
"navigationBarTitleText": "消息提示" |
|||
} |
|||
}, { |
|||
"path": "countDown/countDown", |
|||
"style": { |
|||
"navigationBarTitleText": "倒计时" |
|||
} |
|||
}, { |
|||
"path": "color/color", |
|||
"style": { |
|||
"navigationBarTitleText": "色彩" |
|||
} |
|||
}, { |
|||
"path": "numberBox/numberBox", |
|||
"style": { |
|||
"navigationBarTitleText": "步进器" |
|||
} |
|||
}, { |
|||
"path": "countTo/countTo", |
|||
"style": { |
|||
"navigationBarTitleText": "数字滚动" |
|||
} |
|||
}, { |
|||
"path": "search/search", |
|||
"style": { |
|||
"navigationBarTitleText": "搜索" |
|||
} |
|||
}, { |
|||
"path": "badge/badge", |
|||
"style": { |
|||
"navigationBarTitleText": "徽标数" |
|||
} |
|||
}, { |
|||
"path": "tag/tag", |
|||
"style": { |
|||
"navigationBarTitleText": "标签" |
|||
} |
|||
}, { |
|||
"path": "alert/alert", |
|||
"style": { |
|||
"navigationBarTitleText": "警告" |
|||
} |
|||
}, { |
|||
"path": "switch/switch", |
|||
"style": { |
|||
"navigationBarTitleText": "开关" |
|||
} |
|||
}, { |
|||
"path": "collapse/collapse", |
|||
"style": { |
|||
"navigationBarTitleText": "折叠面板" |
|||
} |
|||
}, { |
|||
"path": "code/code", |
|||
"style": { |
|||
"navigationBarTitleText": "验证码" |
|||
} |
|||
}, { |
|||
"path": "noticeBar/noticeBar", |
|||
"style": { |
|||
"navigationBarTitleText": "滚动通知" |
|||
} |
|||
}, { |
|||
"path": "progress/progress", |
|||
"style": { |
|||
"navigationBarTitleText": "进度条" |
|||
} |
|||
}, { |
|||
"path": "tabbar/tabbar", |
|||
"style": { |
|||
"navigationBarTitleText": "Tabbar" |
|||
} |
|||
}] |
|||
}, { |
|||
"root": "pages/componentsC", |
|||
"pages": [{ |
|||
"path": "table/table", |
|||
"style": { |
|||
"navigationBarTitleText": "表格" |
|||
} |
|||
}, { |
|||
"path": "form/form", |
|||
"style": { |
|||
"navigationBarTitleText": "表单", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "textarea/textarea", |
|||
"style": { |
|||
"navigationBarTitleText": "文本域" |
|||
} |
|||
}, { |
|||
"path": "noNetwork/noNetwork", |
|||
"style": { |
|||
"navigationBarTitleText": "无网络提示" |
|||
} |
|||
}, { |
|||
"path": "loadmore/loadmore", |
|||
"style": { |
|||
"navigationBarTitleText": "加载更多" |
|||
} |
|||
}, { |
|||
"path": "text/text", |
|||
"style": { |
|||
"navigationBarTitleText": "文本" |
|||
} |
|||
}, { |
|||
"path": "steps/steps", |
|||
"style": { |
|||
"navigationBarTitleText": "步骤条" |
|||
} |
|||
}, { |
|||
"path": "navbar/navbar", |
|||
"style": { |
|||
"navigationBarTitleText": "导航栏", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "skeleton/skeleton", |
|||
"style": { |
|||
"navigationBarTitleText": "骨架屏" |
|||
} |
|||
}, { |
|||
"path": "input/input", |
|||
"style": { |
|||
"navigationBarTitleText": "输入框" |
|||
} |
|||
}, { |
|||
"path": "album/album", |
|||
"style": { |
|||
"navigationBarTitleText": "相册" |
|||
} |
|||
}, { |
|||
"path": "avatar/avatar", |
|||
"style": { |
|||
"navigationBarTitleText": "头像" |
|||
} |
|||
}, { |
|||
"path": "readMore/readMore", |
|||
"style": { |
|||
"navigationBarTitleText": "阅读更多" |
|||
} |
|||
}, { |
|||
"path": "layout/layout", |
|||
"style": { |
|||
"navigationBarTitleText": "布局" |
|||
} |
|||
}, { |
|||
"path": "indexList/indexList", |
|||
"style": { |
|||
"navigationBarTitleText": "索引列表" |
|||
} |
|||
}, { |
|||
"path": "tooltip/tooltip", |
|||
"style": { |
|||
"navigationBarTitleText": "长按提示" |
|||
} |
|||
}, { |
|||
"path": "tabs/tabs", |
|||
"style": { |
|||
"navigationBarTitleText": "标签" |
|||
} |
|||
}, { |
|||
"path": "list/list", |
|||
"style": { |
|||
"navigationBarTitleText": "列表" |
|||
} |
|||
}, { |
|||
"path": "swiper/swiper", |
|||
"style": { |
|||
"navigationBarTitleText": "轮播" |
|||
} |
|||
}, { |
|||
"path": "scrollList/scrollList", |
|||
"style": { |
|||
"navigationBarTitleText": "横向滚动列表" |
|||
} |
|||
}, { |
|||
"path": "codeInput/codeInput", |
|||
"style": { |
|||
"navigationBarTitleText": "验证码输入" |
|||
} |
|||
}, { |
|||
"path": "modal/modal", |
|||
"style": { |
|||
"navigationBarTitleText": "模态框", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "picker/picker", |
|||
"style": { |
|||
"navigationBarTitleText": "选择器", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "calendar/calendar", |
|||
"style": { |
|||
"navigationBarTitleText": "日历", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "datetimePicker/datetimePicker", |
|||
"style": { |
|||
"navigationBarTitleText": "时间选择", |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "subsection/subsection", |
|||
"style": { |
|||
"navigationBarTitleText": "分段器" |
|||
} |
|||
}] |
|||
}], |
|||
"preloadRule": { |
|||
"pages/example/components": { |
|||
"network": "all", |
|||
"packages": ["pages/componentsA", "pages/componentsB"] |
|||
} |
|||
}, |
|||
"globalStyle": { |
|||
"navigationStyle": "custom", |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "考核详情", |
|||
"navigationBarBackgroundColor": "#FFFFFF", |
|||
"backgroundColor": "#FFFFFF" |
|||
} |
|||
} |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<view |
|||
class="u-page" |
|||
ref="u-back-top" |
|||
> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义backTop(滚动页面即可在右下角看到图标)</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__backTop-item"> |
|||
<u-checkbox-group |
|||
placement="column" |
|||
shape="square" |
|||
@change="checkboxChange" |
|||
v-model="value" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-back-top |
|||
:right="backTopData.right" |
|||
:customStyle="backTopData.customStyle" |
|||
:bottom="backTopData.bottom" |
|||
:icon="backTopData.icon" |
|||
:mode="backTopData.mode" |
|||
:iconStyle="backTopData.iconStyle" |
|||
:duration="backTopData.duration" |
|||
:scrollTop="scrollTop" |
|||
@click="click" |
|||
></u-back-top> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value: ['自定义图标'], |
|||
backTopData: { |
|||
mode: 'circle', |
|||
icon: 'arrow-upward', |
|||
bottom: 100, |
|||
customStyle: {}, |
|||
iconStyle: {}, |
|||
right:20, |
|||
duration: 300 |
|||
}, |
|||
scrollTop: 0, |
|||
// 被自定义的样式 |
|||
checkboxList: [{ |
|||
name: '显示方形', |
|||
}, |
|||
{ |
|||
name: '自定义图标', |
|||
}, |
|||
{ |
|||
name: '自定义距离', |
|||
}, |
|||
{ |
|||
name: '自定义样式', |
|||
}, |
|||
{ |
|||
name:'自定义返回顶部滚动时间', |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 演示中默认勾选了自定义图标 |
|||
this.backTopData.icon = "arrow-up" |
|||
}, |
|||
onPageScroll(e) { |
|||
this.scrollTop = e.scrollTop; |
|||
}, |
|||
methods: { |
|||
checkboxChange(n) { |
|||
if (n.includes('显示方形')) { |
|||
this.backTopData.mode = 'square' |
|||
} else { |
|||
this.backTopData.mode = "circle" |
|||
} |
|||
if (n.includes('自定义图标')) { |
|||
this.backTopData.icon = "arrow-up" |
|||
} else { |
|||
this.backTopData.icon = "arrow-upward" |
|||
} |
|||
if (n.includes('自定义距离')) { |
|||
this.backTopData.bottom = 300 |
|||
this.backTopData.right=20 |
|||
} else { |
|||
this.backTopData.bottom = 100 |
|||
} |
|||
if (n.includes('自定义样式')) { |
|||
this.backTopData.customStyle = { |
|||
backgroundColor: '#2979ff', |
|||
} |
|||
this.backTopData.iconStyle = { |
|||
color: '#ffffff' |
|||
} |
|||
} else { |
|||
this.backTopData.customStyle = {} |
|||
this.backTopData.iconStyle = {} |
|||
} |
|||
if (n.includes('自定义返回顶部滚动时间')) { |
|||
this.backTopData.duration =1500 |
|||
} else { |
|||
this.backTopData.duration =300 |
|||
} |
|||
}, |
|||
click() { |
|||
console.log('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
height: 1200px; |
|||
&__backTop-item{ |
|||
margin-top:10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,330 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">按钮类型</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="默认按钮" |
|||
size="normal" |
|||
type="info" |
|||
@click="click" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="成功按钮" |
|||
size="normal" |
|||
type="success" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="危险按钮" |
|||
size="normal" |
|||
type="error" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="主要按钮" |
|||
size="normal" |
|||
type="primary" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="警告按钮" |
|||
size="normal" |
|||
type="warning" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">镂空按钮</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="镂空按钮" |
|||
size="normal" |
|||
type="info" |
|||
plain |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="镂空按钮" |
|||
size="normal" |
|||
type="success" |
|||
plain |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="镂空按钮" |
|||
size="normal" |
|||
type="error" |
|||
plain |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="镂空按钮" |
|||
size="normal" |
|||
type="primary" |
|||
plain |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="镂空按钮" |
|||
size="normal" |
|||
type="warning" |
|||
plain |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">细边按钮</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="细边按钮" |
|||
size="normal" |
|||
type="info" |
|||
plain |
|||
hairline |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="细边按钮" |
|||
size="normal" |
|||
type="success" |
|||
plain |
|||
hairline |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="细边按钮" |
|||
size="normal" |
|||
type="error" |
|||
plain |
|||
hairline |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="细边按钮" |
|||
size="normal" |
|||
type="primary" |
|||
plain |
|||
hairline |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="细边按钮" |
|||
size="normal" |
|||
type="warning" |
|||
plain |
|||
hairline |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用按钮</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
disabled |
|||
text="禁用按钮" |
|||
size="normal" |
|||
type="info" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
disabled |
|||
text="禁用按钮" |
|||
size="normal" |
|||
type="success" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
disabled |
|||
text="禁用按钮" |
|||
size="normal" |
|||
type="error" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
disabled |
|||
text="禁用按钮" |
|||
size="normal" |
|||
type="primary" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
disabled |
|||
text="禁用按钮" |
|||
size="normal" |
|||
type="warning" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">加载中</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
loadingText="加载中" |
|||
size="normal" |
|||
loading |
|||
loadingMode="circle" |
|||
type="success" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
class="button-layout__item" |
|||
loadingText="加载中" |
|||
size="normal" |
|||
loading |
|||
type="error" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">按钮图标&按钮形状</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="按钮图标" |
|||
size="normal" |
|||
icon="map" |
|||
plain |
|||
type="warning" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="按钮图标" |
|||
size="normal" |
|||
plain |
|||
shape="circle" |
|||
type="success" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="渐变色按钮" |
|||
size="normal" |
|||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="渐变色按钮" |
|||
size="normal" |
|||
color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="青绿色按钮" |
|||
size="normal" |
|||
color="rgb(10, 185, 156)" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义大小</text> |
|||
<view class="u-demo-block__content" style="padding-bottom: 15px; flex-direction: column;align-items: stretch;flex-wrap: nowrap;"> |
|||
<u-button |
|||
text="超大尺寸" |
|||
size="large" |
|||
type="success" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="普通尺寸" |
|||
size="normal" |
|||
type="error" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
text="小型尺寸" |
|||
size="small" |
|||
type="primary" |
|||
></u-button> |
|||
</view> |
|||
<view class="u-page__button-item"> |
|||
<u-button |
|||
class="button-layout__item" |
|||
text="超小尺寸" |
|||
size="mini" |
|||
type="warning" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// type: 'default', |
|||
// disabled: false |
|||
} |
|||
}, |
|||
onLoad() { |
|||
setTimeout(() => { |
|||
this.type = 'primary' |
|||
this.disabled = true |
|||
}, 2000) |
|||
}, |
|||
methods: { |
|||
click() { |
|||
console.log('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__button-item { |
|||
margin: 0 15px 15px 0; |
|||
} |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,201 @@ |
|||
<template> |
|||
<view class="cell-page"> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">基础功能</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
title="uView UI" |
|||
value="内容" |
|||
isLink="" |
|||
></u-cell> |
|||
<u-cell |
|||
title="利剑出鞘,一统江湖" |
|||
value="内容" |
|||
label="挣脱束缚,向往自由" |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义图标/图片</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
title="单元格" |
|||
icon="lock-fill" |
|||
></u-cell> |
|||
<u-cell |
|||
title="单元格" |
|||
icon="https://cdn.uviewui.com/uview/example/tag.png" |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义大小</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
size="large" |
|||
title="单元格" |
|||
value="内容" |
|||
isLink |
|||
></u-cell> |
|||
<u-cell |
|||
size="large" |
|||
title="单元格" |
|||
value="内容" |
|||
label="描述信息" |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">显示右箭头</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
title="单元格" |
|||
value="组件" |
|||
isLink |
|||
></u-cell> |
|||
<u-cell |
|||
title="单元格" |
|||
value="工具" |
|||
arrow-direction="up" |
|||
isLink |
|||
></u-cell> |
|||
<u-cell |
|||
title="单元格" |
|||
value="模板" |
|||
arrow-direction="down" |
|||
isLink |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">跳转页面</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
title="打开标签页" |
|||
isLink |
|||
url="/pages/componentsB/tag/tag" |
|||
></u-cell> |
|||
<u-cell |
|||
title="打开徽标页" |
|||
isLink |
|||
url="/pages/componentsB/badge/badge" |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">右侧内容垂直居中</text> |
|||
<u-cell-group> |
|||
<u-cell |
|||
title="单元格" |
|||
value="内容" |
|||
label="描述信息" |
|||
center |
|||
></u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义插槽</text> |
|||
<u-cell-group> |
|||
<u-cell value="内容"> |
|||
<view |
|||
slot="title" |
|||
class="u-slot-title" |
|||
> |
|||
<text class="u-cell-text">单元格</text> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
size="mini" |
|||
type="warning" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</u-cell> |
|||
<u-cell |
|||
title="单元格" |
|||
isLink |
|||
> |
|||
<text |
|||
slot="value" |
|||
class="u-slot-value" |
|||
>99</text> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<u-gap height="30"></u-gap> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
console.log('Cell is clicked.'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.cell-page { |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
.cell-box { |
|||
&__title { |
|||
font-size: 14px; |
|||
color: rgb(143, 156, 162); |
|||
margin: 20px 0px 0px 15px; |
|||
} |
|||
|
|||
&__block { |
|||
// background-color: #fff; |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
|
|||
.u-page { |
|||
padding: 0; |
|||
|
|||
&__item { |
|||
|
|||
&__title { |
|||
color: $u-tips-color; |
|||
background-color: $u-bg-color; |
|||
padding: 15px; |
|||
font-size: 15px; |
|||
|
|||
&__slot-title { |
|||
color: $u-primary; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-slot-title { |
|||
@include flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-cell-text { |
|||
font-size: 15px; |
|||
line-height: 22px; |
|||
color: #303133; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.u-slot-value { |
|||
line-height: 17px; |
|||
text-align: center; |
|||
font-size: 10px; |
|||
padding: 0 5px; |
|||
height: 17px; |
|||
color: #FFFFFF; |
|||
border-radius: 100px; |
|||
background-color: #f56c6c; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,329 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue1" |
|||
placement="column" |
|||
@change="checkboxChange" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList1" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义形状</text> |
|||
<text class="u-block__title">中国四大名著是？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue2" |
|||
placement="column" |
|||
@change="checkboxChange" |
|||
shape="square" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList2" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否禁用</text> |
|||
<text class="u-block__title">下面什么东西不能吃？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue3" |
|||
placement="column" |
|||
@change="checkboxChange" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList3" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
:disabled="index===0" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否禁止点击提示语选中复选框</text> |
|||
<text class="u-block__title">北宋四大家是谁？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue4" |
|||
placement="column" |
|||
@change="checkboxChange" |
|||
:labelDisabled="true" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList4" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<text class="u-block__title">哪个颜色最好看？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue5" |
|||
placement="column" |
|||
@change="checkboxChange" |
|||
activeColor="#19be6b" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in checkboxList5" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横向排列形式</text> |
|||
<text class="u-block__title">什么东西不能飞？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue6" |
|||
@change="checkboxChange" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginRight: '16px'}" |
|||
v-for="(item, index) in checkboxList6" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横向两端排列形式</text> |
|||
<text class="u-block__title">什么东西不能吃？</text> |
|||
<view> |
|||
<view class="u-page__checkbox-item"> |
|||
<u-checkbox-group |
|||
v-model="checkboxValue7" |
|||
@change="checkboxChange" |
|||
:borderBottom="true" |
|||
placement="column" |
|||
iconPlacement="right" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginBottom: '16px'}" |
|||
v-for="(item, index) in checkboxList7" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 基本案列数据 |
|||
checkboxList1: [{ |
|||
name: '苹果', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '橙子', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue1: ['苹果', '橙子'], |
|||
|
|||
// 自定义形状数据 |
|||
checkboxList2: [{ |
|||
name: '西游记', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '红楼梦', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '三国演义', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '水浒传', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue2: ['西游记', '红楼梦', '三国演义', '水浒传'], |
|||
|
|||
// 是否禁用数据 |
|||
checkboxList3: [{ |
|||
name: '冬瓜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '西瓜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '黄瓜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '傻瓜', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue3: ['傻瓜'], |
|||
|
|||
// 是否禁止点击提示语选中复选框数据 |
|||
checkboxList4: [{ |
|||
name: '黄庭坚', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '欧阳修', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '苏小宝', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '王安石', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue4: ['黄庭坚', '欧阳修', '王安石'], |
|||
|
|||
//自定义颜色数据 |
|||
checkboxList5: [{ |
|||
name: '红色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '黄色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '绿色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '蓝色', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue5: ['绿色'], |
|||
|
|||
//横向排列形式数据 |
|||
checkboxList6: [{ |
|||
name: '小鸟', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '游艇', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '轮船', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '飞机', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue6: ['游艇', '轮船'], |
|||
|
|||
//横向两端排列形式 |
|||
checkboxList7: [{ |
|||
name: '汽车', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '蒸汽机', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '猪肉', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '抄手', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中 |
|||
checkboxValue7: ['汽车', '蒸汽机'], |
|||
} |
|||
|
|||
}, |
|||
watch: { |
|||
checkboxValue1(newValue, oldValue) { |
|||
// console.log('v-model', newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
checkboxChange(n) { |
|||
// console.log('change', n); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page {} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view> |
|||
<u-divider text="分割线"></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否虚线</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
:dashed="true" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否细线</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
:hairline="true" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否以点代替文字</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
:dot="true" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">文本内容靠左</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
textPosition="left" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">文本内容靠右</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
textPosition="right" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义文本颜色</text> |
|||
<view> |
|||
<u-divider |
|||
text="分割线" |
|||
textColor="#2979ff" |
|||
lineColor="#2979ff" |
|||
></u-divider> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-divider {} |
|||
</style> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-page__top-box"> |
|||
<text class="u-demo-block__title">演示效果</text> |
|||
</view> |
|||
<u-empty |
|||
:mode="mode" |
|||
:icon="imgList[mode]" |
|||
> |
|||
<u-button |
|||
size="small" |
|||
type="primary" |
|||
:style="{marginTop:10+'px'}" |
|||
v-if="mode=='car'" |
|||
text="查看更多商品" |
|||
> |
|||
</u-button> |
|||
</u-empty> |
|||
<div class="empty-select"> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openImg(item.imgName)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</div> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
// 如果使用这些图片，请勿直接引入cdn.uviewui.com的资源，因为此资源路径随时会有变动 |
|||
// 变动后，您将会访问图片失败，如有需要，您可以将这些图片上传到自己的oss或者服务器再使用 |
|||
const baseUrl = 'http://cdn.uviewui.com/uview/empty/' |
|||
return { |
|||
mode: 'car', |
|||
imgList: { |
|||
car: baseUrl + 'car.png', |
|||
address: baseUrl + 'address.png', |
|||
comment: baseUrl + 'comment.png', |
|||
coupon: baseUrl + 'coupon.png', |
|||
data: baseUrl + 'data.png', |
|||
history: baseUrl + 'history.png', |
|||
list: baseUrl + 'list.png', |
|||
message: baseUrl + 'message.png', |
|||
news: baseUrl + 'news.png', |
|||
order: baseUrl + 'order.png', |
|||
page: baseUrl + 'page.png', |
|||
permission: baseUrl + 'permission.png', |
|||
search: baseUrl + 'search.png', |
|||
wifi: baseUrl + 'wifi.png', |
|||
}, |
|||
list: [{ |
|||
imgName: 'car', |
|||
title: '购物车为空(同时传入slot)', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/car.png' |
|||
}, |
|||
{ |
|||
imgName: 'data', |
|||
title: '数据为空', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/data.png' |
|||
}, { |
|||
imgName: 'comment', |
|||
title: '评论为空', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/comment.png' |
|||
}, { |
|||
imgName: 'coupon', |
|||
title: '没有优惠券', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/coupon.png' |
|||
}, { |
|||
imgName: 'history', |
|||
title: '无历史记录', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/history.png' |
|||
}, { |
|||
imgName: 'list', |
|||
title: '列表为空', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/list.png' |
|||
}, { |
|||
imgName: 'message', |
|||
title: '消息列表为空', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/message.png' |
|||
}, { |
|||
imgName: 'news', |
|||
title: '无新闻列表', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/news.png' |
|||
}, { |
|||
imgName: 'order', |
|||
title: '订单为空', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/order.png' |
|||
}, { |
|||
imgName: 'page', |
|||
title: '页面不存在', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/page.png' |
|||
}, { |
|||
imgName: 'permission', |
|||
title: '无权限', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/permission.png' |
|||
}, { |
|||
imgName: 'search', |
|||
title: '没有搜索结果', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/search.png' |
|||
}, { |
|||
imgName: 'wifi', |
|||
title: '没有WiFi', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/wifi.png' |
|||
}, |
|||
] |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
//点击改变图片 |
|||
openImg(imgName) { |
|||
// this.mode = this.imgList[imgName] |
|||
this.mode = imgName; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 40rpx 0px; |
|||
|
|||
&__top-box { |
|||
padding-left: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.empty-select { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案列</text> |
|||
<view class="u-page__gap-item"> |
|||
<u-gap bgColor="#f3f4f6"></u-gap> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-page__gap-item"> |
|||
<u-gap bgColor="#2979ff"></u-gap> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义高度</text> |
|||
<view class="u-page__gap-item"> |
|||
<u-gap bgColor="#f3f4f6" height="40"></u-gap> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义上下边距</text> |
|||
<view class="u-page__gap-item"> |
|||
<u-gap |
|||
bgColor="#f3f4f6" |
|||
marginTop="20" |
|||
marginBottom="20" |
|||
></u-gap> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view> |
|||
<u-grid |
|||
:border="false" |
|||
@click="click" |
|||
> |
|||
<u-grid-item |
|||
v-for="(baseListItem,baseListIndex) in baseList" |
|||
:key="baseListIndex" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="baseListItem.name" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{baseListItem.title}}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示边框</text> |
|||
<view> |
|||
<u-grid :border="true"> |
|||
<u-grid-item |
|||
v-for="(listItem,listIndex) in list" |
|||
:key="listIndex" |
|||
customStyle="padding-top: 10px; padding-bottom: 10px" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="listItem.name" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{listItem.title}}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">绑定点击事件&自定义列数</text> |
|||
<view> |
|||
<u-grid |
|||
:border="false" |
|||
col="4" |
|||
> |
|||
<u-grid-item |
|||
v-for="(listItem,listIndex) in list" |
|||
:key="listIndex" |
|||
customStyle="padding-top: 10px; padding-bottom: 10px" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="listItem.name" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{listItem.title}}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可滑动</text> |
|||
<view> |
|||
<swiper |
|||
:indicator-dots="true" |
|||
class="swiper" |
|||
> |
|||
<swiper-item> |
|||
<u-grid :border="true"> |
|||
<u-grid-item |
|||
v-for="(item, index) in swiperList" |
|||
:index="index" |
|||
:key="index" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="item" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<u-grid :border="true"> |
|||
<u-grid-item |
|||
v-for="(item, index) in swiperList" |
|||
:index="index + 9" |
|||
:key="index" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="item" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{ '宫格' + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<u-grid :border="true"> |
|||
<u-grid-item |
|||
v-for="(item, index) in swiperList" |
|||
:index="index + 18" |
|||
:key="index" |
|||
> |
|||
<u-icon |
|||
:customStyle="{paddingTop:20+'rpx'}" |
|||
:name="item" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="grid-text">{{ "宫格" + (index + 1) }}</text> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
</view> |
|||
<u-toast ref="uToast" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
baseList: [{ |
|||
name: 'photo', |
|||
title: '图片' |
|||
}, |
|||
{ |
|||
name: 'lock', |
|||
title: '锁头' |
|||
}, |
|||
{ |
|||
name: 'star', |
|||
title: '星星' |
|||
}, |
|||
], |
|||
list: [{ |
|||
name: 'photo', |
|||
title: '图片' |
|||
}, |
|||
{ |
|||
name: 'lock', |
|||
title: '锁头' |
|||
}, |
|||
{ |
|||
name: 'star', |
|||
title: '星星' |
|||
}, |
|||
{ |
|||
name: 'hourglass', |
|||
title: '沙漏' |
|||
}, |
|||
{ |
|||
name: 'home', |
|||
title: '首页' |
|||
}, |
|||
{ |
|||
name: 'volume', |
|||
title: '音量' |
|||
}, |
|||
], |
|||
swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'], |
|||
} |
|||
}, |
|||
methods: { |
|||
click(name) { |
|||
this.$refs.uToast.success(`点击了第${name}个`) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.swiper { |
|||
height: 220px; |
|||
} |
|||
|
|||
.grid-text { |
|||
font-size: 14px; |
|||
color: #909399; |
|||
padding: 10rpx 0 20rpx 0rpx; |
|||
/* #ifndef APP-PLUS */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,664 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-border-left u-border-top u-page__grid"> |
|||
<view |
|||
@tap="selectIcon(item.name)" |
|||
class="u-page__grid__item u-border-bottom u-border-right" |
|||
v-for="(item, index) in iconList" |
|||
:key="index" |
|||
> |
|||
<view class="u-page__grid__item__icon"> |
|||
<u-icon |
|||
:name="item.name" |
|||
size="30" |
|||
color="#909399" |
|||
></u-icon> |
|||
</view> |
|||
<text class="u-page__grid__item__text">{{item.name}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
iconList: [{ |
|||
name: 'level' |
|||
}, |
|||
{ |
|||
name: 'woman' |
|||
}, |
|||
{ |
|||
name: 'man' |
|||
}, |
|||
{ |
|||
name: 'arrow-left-double' |
|||
}, |
|||
{ |
|||
name: 'arrow-right-double' |
|||
}, |
|||
{ |
|||
name: 'chat' |
|||
}, |
|||
{ |
|||
name: 'chat-fill' |
|||
}, |
|||
{ |
|||
name: 'red-packet' |
|||
}, |
|||
{ |
|||
name: 'red-packet-fill' |
|||
}, |
|||
{ |
|||
name: 'order' |
|||
}, |
|||
{ |
|||
name: 'checkbox-mark' |
|||
}, |
|||
{ |
|||
name: 'arrow-up-fill' |
|||
}, |
|||
{ |
|||
name: 'arrow-down-fill' |
|||
}, |
|||
{ |
|||
name: 'backspace' |
|||
}, |
|||
{ |
|||
name: 'photo' |
|||
}, |
|||
{ |
|||
name: 'photo-fill' |
|||
}, |
|||
{ |
|||
name: 'lock' |
|||
}, |
|||
{ |
|||
name: 'lock-fill' |
|||
}, |
|||
{ |
|||
name: 'lock-open' |
|||
}, |
|||
{ |
|||
name: 'lock-opened-fill' |
|||
}, |
|||
{ |
|||
name: 'hourglass' |
|||
}, |
|||
{ |
|||
name: 'hourglass-half-fill' |
|||
}, |
|||
{ |
|||
name: 'home' |
|||
}, |
|||
{ |
|||
name: 'home-fill' |
|||
}, |
|||
{ |
|||
name: 'fingerprint' |
|||
}, |
|||
{ |
|||
name: 'cut' |
|||
}, |
|||
{ |
|||
name: 'star' |
|||
}, |
|||
{ |
|||
name: 'star-fill' |
|||
}, |
|||
{ |
|||
name: 'share' |
|||
}, |
|||
{ |
|||
name: 'share-fill' |
|||
}, |
|||
{ |
|||
name: 'volume' |
|||
}, |
|||
{ |
|||
name: 'volume-fill' |
|||
}, |
|||
{ |
|||
name: 'volume-off' |
|||
}, |
|||
{ |
|||
name: 'volume-off-fill' |
|||
}, |
|||
{ |
|||
name: 'trash' |
|||
}, |
|||
{ |
|||
name: 'trash-fill' |
|||
}, |
|||
{ |
|||
name: 'rewind-right' |
|||
}, |
|||
{ |
|||
name: 'rewind-right-fill' |
|||
}, |
|||
{ |
|||
name: 'rewind-left' |
|||
}, |
|||
{ |
|||
name: 'rewind-left-fill' |
|||
}, |
|||
{ |
|||
name: 'shopping-cart' |
|||
}, |
|||
{ |
|||
name: 'shopping-cart-fill' |
|||
}, |
|||
{ |
|||
name: 'question' |
|||
}, |
|||
{ |
|||
name: 'question-circle' |
|||
}, |
|||
{ |
|||
name: 'question-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'plus' |
|||
}, |
|||
{ |
|||
name: 'plus-circle' |
|||
}, |
|||
{ |
|||
name: 'plus-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'tags' |
|||
}, |
|||
{ |
|||
name: 'tags-fill' |
|||
}, |
|||
{ |
|||
name: 'pause' |
|||
}, |
|||
{ |
|||
name: 'pause-circle' |
|||
}, |
|||
{ |
|||
name: 'pause-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'play-circle' |
|||
}, |
|||
{ |
|||
name: 'play-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'map' |
|||
}, |
|||
{ |
|||
name: 'map-fill' |
|||
}, |
|||
{ |
|||
name: 'phone' |
|||
}, |
|||
{ |
|||
name: 'phone-fill' |
|||
}, |
|||
{ |
|||
name: 'list' |
|||
}, |
|||
{ |
|||
name: 'list-dot' |
|||
}, |
|||
{ |
|||
name: 'man-delete' |
|||
}, |
|||
{ |
|||
name: 'man-add' |
|||
}, |
|||
{ |
|||
name: 'man-add-fill' |
|||
}, |
|||
{ |
|||
name: 'person-delete-fill' |
|||
}, |
|||
{ |
|||
name: 'info' |
|||
}, |
|||
{ |
|||
name: 'info-circle' |
|||
}, |
|||
{ |
|||
name: 'info-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'minus' |
|||
}, |
|||
{ |
|||
name: 'minus-circle' |
|||
}, |
|||
{ |
|||
name: 'minus-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'mic' |
|||
}, |
|||
{ |
|||
name: 'mic-off' |
|||
}, |
|||
{ |
|||
name: 'grid' |
|||
}, |
|||
{ |
|||
name: 'grid-fill' |
|||
}, |
|||
{ |
|||
name: 'eye' |
|||
}, |
|||
{ |
|||
name: 'eye-fill' |
|||
}, |
|||
{ |
|||
name: 'eye-off' |
|||
}, |
|||
{ |
|||
name: 'file-text' |
|||
}, |
|||
{ |
|||
name: 'file-text-fill' |
|||
}, |
|||
{ |
|||
name: 'edit-pen' |
|||
}, |
|||
{ |
|||
name: 'edit-pen-fill' |
|||
}, |
|||
{ |
|||
name: 'email' |
|||
}, |
|||
{ |
|||
name: 'email-fill' |
|||
}, |
|||
{ |
|||
name: 'download' |
|||
}, |
|||
{ |
|||
name: 'checkmark' |
|||
}, |
|||
{ |
|||
name: 'checkmark-circle' |
|||
}, |
|||
{ |
|||
name: 'checkmark-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'clock' |
|||
}, |
|||
{ |
|||
name: 'clock-fill' |
|||
}, |
|||
{ |
|||
name: 'close' |
|||
}, |
|||
{ |
|||
name: 'close-circle' |
|||
}, |
|||
{ |
|||
name: 'close-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'calendar' |
|||
}, |
|||
{ |
|||
name: 'calendar-fill' |
|||
}, |
|||
{ |
|||
name: 'car' |
|||
}, |
|||
{ |
|||
name: 'car-fill' |
|||
}, |
|||
{ |
|||
name: 'bell' |
|||
}, |
|||
{ |
|||
name: 'bell-fill' |
|||
}, |
|||
{ |
|||
name: 'bookmark' |
|||
}, |
|||
{ |
|||
name: 'bookmark-fill' |
|||
}, |
|||
{ |
|||
name: 'attach' |
|||
}, |
|||
{ |
|||
name: 'play-right' |
|||
}, |
|||
{ |
|||
name: 'play-right-fill' |
|||
}, |
|||
{ |
|||
name: 'play-left' |
|||
}, |
|||
{ |
|||
name: 'play-left-fill' |
|||
}, |
|||
{ |
|||
name: 'error' |
|||
}, |
|||
{ |
|||
name: 'error-circle' |
|||
}, |
|||
{ |
|||
name: 'error-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'wifi' |
|||
}, |
|||
{ |
|||
name: 'wifi-off' |
|||
}, |
|||
{ |
|||
name: 'skip-back-left' |
|||
}, |
|||
{ |
|||
name: 'skip-forward-right' |
|||
}, |
|||
{ |
|||
name: 'search' |
|||
}, |
|||
{ |
|||
name: 'setting' |
|||
}, |
|||
{ |
|||
name: 'setting-fill' |
|||
}, |
|||
{ |
|||
name: 'more-dot-fill' |
|||
}, |
|||
{ |
|||
name: 'more-circle' |
|||
}, |
|||
{ |
|||
name: 'more-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'bag' |
|||
}, |
|||
{ |
|||
name: 'bag-fill' |
|||
}, |
|||
{ |
|||
name: 'arrow-upward' |
|||
}, |
|||
{ |
|||
name: 'arrow-downward' |
|||
}, |
|||
{ |
|||
name: 'arrow-leftward' |
|||
}, |
|||
{ |
|||
name: 'arrow-rightward' |
|||
}, |
|||
{ |
|||
name: 'arrow-up' |
|||
}, |
|||
{ |
|||
name: 'arrow-down' |
|||
}, |
|||
{ |
|||
name: 'arrow-left' |
|||
}, |
|||
{ |
|||
name: 'arrow-right' |
|||
}, |
|||
{ |
|||
name: 'rmb' |
|||
}, |
|||
{ |
|||
name: 'rmb-circle' |
|||
}, |
|||
{ |
|||
name: 'rmb-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'thumb-up' |
|||
}, |
|||
{ |
|||
name: 'thumb-up-fill' |
|||
}, |
|||
{ |
|||
name: 'thumb-down' |
|||
}, |
|||
{ |
|||
name: 'thumb-down-fill' |
|||
}, |
|||
{ |
|||
name: 'coupon' |
|||
}, |
|||
{ |
|||
name: 'coupon-fill' |
|||
}, |
|||
{ |
|||
name: 'kefu-ermai' |
|||
}, |
|||
{ |
|||
name: 'server-fill' |
|||
}, |
|||
{ |
|||
name: 'server-man' |
|||
}, |
|||
{ |
|||
name: 'scan' |
|||
}, |
|||
{ |
|||
name: 'warning' |
|||
}, |
|||
{ |
|||
name: 'warning-fill' |
|||
}, |
|||
{ |
|||
name: 'google' |
|||
}, |
|||
{ |
|||
name: 'google-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'chrome-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'ie' |
|||
}, |
|||
{ |
|||
name: 'IE-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'github-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'android-fill' |
|||
}, |
|||
{ |
|||
name: 'android-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'apple-fill' |
|||
}, |
|||
{ |
|||
name: 'camera' |
|||
}, |
|||
{ |
|||
name: 'camera-fill' |
|||
}, |
|||
{ |
|||
name: 'pushpin' |
|||
}, |
|||
{ |
|||
name: 'pushpin-fill' |
|||
}, |
|||
{ |
|||
name: 'minus-square-fill' |
|||
}, |
|||
{ |
|||
name: 'plus-square-fill' |
|||
}, |
|||
{ |
|||
name: 'heart' |
|||
}, |
|||
{ |
|||
name: 'heart-fill' |
|||
}, |
|||
{ |
|||
name: 'reload' |
|||
}, |
|||
{ |
|||
name: 'account' |
|||
}, |
|||
{ |
|||
name: 'account-fill' |
|||
}, |
|||
{ |
|||
name: 'minus-people-fill' |
|||
}, |
|||
{ |
|||
name: 'plus-people-fill' |
|||
}, |
|||
{ |
|||
name: 'integral' |
|||
}, |
|||
{ |
|||
name: 'integral-fill' |
|||
}, |
|||
{ |
|||
name: 'zhihu' |
|||
}, |
|||
{ |
|||
name: 'zhihu-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'gift' |
|||
}, |
|||
{ |
|||
name: 'gift-fill' |
|||
}, |
|||
{ |
|||
name: 'zhifubao' |
|||
}, |
|||
{ |
|||
name: 'zhifubao-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'weixin-fill' |
|||
}, |
|||
{ |
|||
name: 'weixin-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'twitter' |
|||
}, |
|||
{ |
|||
name: 'twitter-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'taobao' |
|||
}, |
|||
{ |
|||
name: 'taobao-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'weibo' |
|||
}, |
|||
{ |
|||
name: 'weibo-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'qq-fill' |
|||
}, |
|||
{ |
|||
name: 'qq-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'moments' |
|||
}, |
|||
{ |
|||
name: 'moments-circel-fill' |
|||
}, |
|||
{ |
|||
name: 'qzone' |
|||
}, |
|||
{ |
|||
name: 'qzone-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'facebook' |
|||
}, |
|||
{ |
|||
name: 'facebook-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'baidu' |
|||
}, |
|||
{ |
|||
name: 'baidu-circle-fill' |
|||
}, |
|||
{ |
|||
name: 'share-square' |
|||
}, |
|||
] |
|||
}; |
|||
}, |
|||
methods: { |
|||
selectIcon(name) { |
|||
// #ifdef H5 |
|||
return uni.$u.toast('H5暂不支持复制'); |
|||
// #endif |
|||
uni.setClipboardData({ |
|||
data: name, |
|||
success: () => { |
|||
|
|||
} |
|||
}); |
|||
uni.hideToast() |
|||
uni.$u.toast('图标名称已复制'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 14rpx; |
|||
|
|||
&__grid { |
|||
@include flex(row); |
|||
flex-wrap: wrap; |
|||
|
|||
&__item { |
|||
@include flex(column); |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 240rpx; |
|||
width: 240rpx; |
|||
padding: 0 5px; |
|||
|
|||
&__icon { |
|||
height: 130rpx; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
&__text { |
|||
color: $u-tips-color; |
|||
/* #ifndef APP-NVUE */ |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
/* #endif */ |
|||
font-size: 14px; |
|||
height: 110rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__image-item"> |
|||
<u--image |
|||
:showLoading="true" |
|||
:src="src" |
|||
width="80px" |
|||
height="80px" |
|||
@click="click" |
|||
></u--image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义形状</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__image-item"> |
|||
<u--image |
|||
shape="circle" |
|||
:src="src" |
|||
width="80px" |
|||
height="80px" |
|||
></u--image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义圆角</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__image-item"> |
|||
<u--image |
|||
radius="4" |
|||
:src="src" |
|||
width="80px" |
|||
height="80px" |
|||
></u--image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">图片模式(widthFit)</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__image-item"> |
|||
<u--image |
|||
:src="src" |
|||
width="80px" |
|||
height="80px" |
|||
mode="widthFit" |
|||
></u--image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
src: 'https://cdn.uviewui.com/uview/album/1.jpg' |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
console.log('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line color="#2979ff"></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义长度</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line length="200"></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义方向</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line |
|||
length="30" |
|||
color="#2979ff" |
|||
direction="col" |
|||
></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否显示1px粗线条</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line :hairline="false"></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">线条与上下左右元素的间距</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line margin="20"></u-line> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否虚线</text> |
|||
<view class="u-page__line-item"> |
|||
<u-line |
|||
color="#2979ff" |
|||
:dashed="true" |
|||
></u-line> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page{ |
|||
&__line-item{ |
|||
margin-top:5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__link-item"> |
|||
<u-link |
|||
href="https://uviewui.com/" |
|||
text="打开uView UI文档" |
|||
@click="click" |
|||
></u-link> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示下划线</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__link-item"> |
|||
<u-link |
|||
href="https://uviewui.com/" |
|||
:underLine="true" |
|||
text="Go to uView doc" |
|||
></u-link> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__link-item"> |
|||
<u-link |
|||
href="https://uviewui.com/" |
|||
lineColor="#19be6b" |
|||
color="#19be6b" |
|||
text="打开uView UI文档" |
|||
></u-link> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义链接内容</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__link-item"> |
|||
<u-link |
|||
href="https://uniapp.dcloud.io/" |
|||
text="打开uni-app文档" |
|||
></u-link> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
console.log('click'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__link-item { |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案列</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">半圆loading</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon mode="semicircle"></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">圆形loading</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon mode="circle"></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义动画</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon mode="circle" timingFunction="linear"></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon color="#19be6b"></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义文字</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__loading-item"> |
|||
<u-loading-icon |
|||
:vertical="true" |
|||
text="加载中" |
|||
></u-loading-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__loading-item { |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="加载页" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-gap |
|||
bgColor="#fff" |
|||
height="20" |
|||
></u-gap> |
|||
<u-cell-group> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openLoadingPage(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-loading-page |
|||
:loadingText="loadingPageData.loadingText" |
|||
:image="loadingPageData.image" |
|||
:loadingMode="loadingPageData.loadingMode" |
|||
:bgColor="loadingPageData.bgColor" |
|||
:loading="loading" |
|||
:color="loadingPageData.color" |
|||
:loadingColor="loadingPageData.loadingColor" |
|||
> |
|||
</u-loading-page> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
loadingPageData: { |
|||
// 自定义提示内容 |
|||
loadingText: '', |
|||
// 自定义图片 |
|||
image: '', |
|||
// 自定义加载动画模式 |
|||
loadingMode: '', |
|||
// 自定义背景色 |
|||
bgColor: '#ffffff', |
|||
}, |
|||
list: [{ |
|||
title: '自定义提示内容', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/promptContent.png', |
|||
}, |
|||
{ |
|||
title: '自定义图片', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customPicture.png', |
|||
}, |
|||
{ |
|||
title: '自定义加载动画模式', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customMode.png', |
|||
}, |
|||
{ |
|||
title: '自定义背景色', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customBgColor.png', |
|||
|
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
openLoadingPage(indexNum) { |
|||
this.loadingPageData = { |
|||
loadingText: '', |
|||
image: '', |
|||
loadingMode: '', |
|||
bgColor: '#ffffff', |
|||
} |
|||
if (indexNum == 0) { |
|||
//自定义提示内容 |
|||
this.loadingPageData.loadingMode = 'semicircle' |
|||
this.loadingPageData.loadingText = "Hello uView" |
|||
this.loadingPageData.color = '#C8C8C8', |
|||
this.loadingPageData.loadingColor = '#C8C8C8' |
|||
} else if (indexNum == 1) { |
|||
// 自定义图片 |
|||
this.loadingPageData.image = |
|||
"/static/uview/common/logo.png" |
|||
this.loadingPageData.loadingText = "uView UI" |
|||
this.loadingPageData.color = '#C8C8C8', |
|||
this.loadingPageData.loadingColor = '#C8C8C8' |
|||
} else if (indexNum == 2) { |
|||
// 自定义加载动画模式 |
|||
this.loadingPageData.loadingMode = 'circle' |
|||
this.loadingPageData.loadingText = "uView UI" |
|||
this.loadingPageData.color = '#C8C8C8', |
|||
this.loadingPageData.loadingColor = '#C8C8C8' |
|||
} else if (indexNum == 3) { |
|||
// 自定义背景色 |
|||
this.loadingPageData.loadingMode = 'spinner' |
|||
this.loadingPageData.bgColor = 'rgba(0, 0, 0, 0.3)' |
|||
this.loadingPageData.loadingText = "uView UI" |
|||
this.loadingPageData.color = '#eee', |
|||
this.loadingPageData.loadingColor = '#ddd' |
|||
} |
|||
this.loading = true |
|||
setTimeout(() => { |
|||
this.loading = false |
|||
}, 2000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="遮罩层" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openMask(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
<u-overlay |
|||
:show="show" |
|||
@click="show = !show" |
|||
></u-overlay> |
|||
|
|||
<u-overlay |
|||
:show="showSlot" |
|||
@click="showSlot = !showSlot" |
|||
> |
|||
<view class="overlay-wrap"> |
|||
<view class="overlay-wrap__box"></view> |
|||
</view> |
|||
</u-overlay> |
|||
<u-overlay |
|||
opacity=".85" |
|||
:show="showOpcatiy" |
|||
@click="showOpcatiy = !showOpcatiy" |
|||
> |
|||
</u-overlay> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
showSlot: false, |
|||
showOpcatiy: false, |
|||
list: [{ |
|||
title: '基本案列', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/baseCases.png' |
|||
}, |
|||
{ |
|||
title: '嵌入内容', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/embeddedContent.png' |
|||
}, |
|||
{ |
|||
title: '设置透明度', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/setTransparency.png' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
openMask(indexNum) { |
|||
if (indexNum == 0) { |
|||
this.show = !this.show; |
|||
} else if (indexNum == 1) { |
|||
this.showSlot = !this.showSlot |
|||
} else if (indexNum == 2) { |
|||
this.showOpcatiy = !this.showOpcatiy |
|||
} |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
|
|||
.overlay-wrap { |
|||
@include flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex: 1; |
|||
|
|||
&__box { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
background-color: #70e1f5; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<view> |
|||
<u-navbar |
|||
title="弹窗" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-gap |
|||
height="20" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<u-cell-group> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openPopup(item.popupData)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-popup |
|||
:safeAreaInsetBottom="true" |
|||
:safeAreaInsetTop="true" |
|||
:mode="popupData.mode" |
|||
:show="show" |
|||
:round="popupData.round" |
|||
:overlay="popupData.overlay" |
|||
:borderRadius="popupData.borderRadius" |
|||
:closeable="popupData.closeable" |
|||
:closeOnClickOverlay="popupData.closeOnClickOverlay" |
|||
@close="close" |
|||
@open="open" |
|||
> |
|||
<view |
|||
class="u-popup-slot" |
|||
:style="{ |
|||
width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px', |
|||
marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0', |
|||
}" |
|||
> |
|||
<u-button |
|||
type="success" |
|||
text="点我关闭" |
|||
customStyle="width: 200rpx" |
|||
@click="show = !show" |
|||
></u-button> |
|||
</view> |
|||
</u-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'bottom', |
|||
borderRadius: '', |
|||
closeable: true, |
|||
closeOnClickOverlay: true |
|||
}, |
|||
list: [{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'top', |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '顶部弹出', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'right', |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '右侧弹出', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'bottom', |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '底部弹出', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'left', |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '左侧弹出', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'center', |
|||
round: 10, |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '居中弹出', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'bottom', |
|||
round: 10, |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '显示圆角', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'bottom', |
|||
closeable: false, |
|||
closeOnClickOverlay: false |
|||
}, |
|||
title: '禁止点击遮罩关闭', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png' |
|||
}, |
|||
{ |
|||
popupData: { |
|||
overlay: true, |
|||
mode: 'bottom', |
|||
closeable: true, |
|||
closeOnClickOverlay: true |
|||
}, |
|||
title: '显示关闭按钮', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
openPopup(popupData) { |
|||
this.popupData = popupData |
|||
uni.$u.sleep().then(() => { |
|||
this.show = !this.show |
|||
}) |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
open() { |
|||
// console.log('open'); |
|||
}, |
|||
close() { |
|||
this.show = false |
|||
// console.log('close'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-popup-slot { |
|||
width: 200px; |
|||
height: 150px; |
|||
@include flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,330 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue1" |
|||
placement="column" |
|||
@change="groupChange" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in radiolist1" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
@change="radioChange" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义形状</text> |
|||
<text class="u-block__title">王者荣耀谁最帅？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue2" |
|||
placement="column" |
|||
shape="square" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in radiolist2" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否禁用</text> |
|||
<text class="u-block__title">苹果、香蕉和菠萝哪个最甜？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue3" |
|||
placement="column" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in radiolist3" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
:disabled="!index" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">纵向排列</text> |
|||
<text class="u-block__title">狙击枪用哪个倍镜最好？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue4" |
|||
placement="column" |
|||
:labelDisabled="true" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom:'8px'}" |
|||
v-for="(item, index) in radiolist4" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色？</text> |
|||
<text class="u-block__title">你比较喜欢下面哪个颜色？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue5" |
|||
placement="column" |
|||
activeColor="#19be6b" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom: '8px'}" |
|||
v-for="(item, index) in radiolist5" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横向排列形式？</text> |
|||
<text class="u-block__title">王者荣耀哪个英雄最美？</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue6" |
|||
placement="row" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginRight: '16px'}" |
|||
v-for="(item, index) in radiolist6" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横向两端排列形式？</text> |
|||
<text class="u-block__title">你觉得阿木木可爱吗？</text> |
|||
<view> |
|||
<view class="u-page__radio-item"> |
|||
<u-radio-group |
|||
v-model="radiovalue7" |
|||
:borderBottom="true" |
|||
placement="column" |
|||
iconPlacement="right" |
|||
> |
|||
<u-radio |
|||
:customStyle="{marginBottom: '16px'}" |
|||
v-for="(item, index) in radiolist7" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 基本案列数据 |
|||
radiolist1: [{ |
|||
name: '苹果', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '橙子', |
|||
disabled: false |
|||
}, { |
|||
name: '榴莲', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue1: '苹果', |
|||
|
|||
// 自定义形状数据 |
|||
radiolist2: [{ |
|||
name: '李白', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '韩信', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '马可波罗', |
|||
disabled: false |
|||
}, { |
|||
name: '百里守约', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue2: '李白', |
|||
|
|||
// 是否禁用数据 |
|||
radiolist3: [{ |
|||
name: '苹果', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '菠萝', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue3: '苹果', |
|||
|
|||
// 是否禁止点击提示语选中单选框数据 |
|||
radiolist4: [{ |
|||
name: '3倍镜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '4倍镜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '6倍镜', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '8倍镜', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue4: '6倍镜', |
|||
|
|||
//自定义颜色数据 |
|||
radiolist5: [{ |
|||
name: '红色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '绿色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '蓝色', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '黄色', |
|||
disabled: false |
|||
} |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue5: '绿色', |
|||
|
|||
//横向排列形式数据 |
|||
radiolist6: [{ |
|||
name: '妲己', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '虞姬', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '不知火舞', |
|||
disabled: false |
|||
}, |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue6: '妲己', |
|||
|
|||
//横向两端排列形式数据 |
|||
radiolist7: [{ |
|||
name: '可爱', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '一般', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '不可爱', |
|||
disabled: false |
|||
}, |
|||
], |
|||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中 |
|||
radiovalue7: '可爱', |
|||
} |
|||
}, |
|||
watch: { |
|||
radiovalue1(newValue, oldValue) { |
|||
console.log('v-model', newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
groupChange(n) { |
|||
console.log('groupChange', n); |
|||
}, |
|||
radioChange(n) { |
|||
console.log('radioChange', n); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__style { |
|||
font-size: 16px; |
|||
color: rgb(96, 98, 102); |
|||
margin-bottom: 20rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 16px; |
|||
color: rgb(96, 98, 102); |
|||
margin-bottom: 20rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-rate size="20"></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义选中星星数量</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-rate |
|||
size="20" |
|||
v-model="value" |
|||
@change="change" |
|||
></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义星星大小</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-rate size="30" count="4"></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否禁用评分</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate size="20" :disabled="true"></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义选中星星颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate |
|||
size="20" |
|||
v-model="activeColorValue" |
|||
activeColor="#2979ff" |
|||
></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义未选中星星颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate |
|||
size="20" |
|||
v-model="value1" |
|||
inactiveColor="#2979ff" |
|||
></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁止触摸选择</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate size="20" :touchable="false"></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">允许触摸选择</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate size="20" :touchable="true"></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否允许半星</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate |
|||
size="20" |
|||
v-model="HalfValue" |
|||
:allowHalf="true" |
|||
@change="change" |
|||
></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义选中的图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__rate-item"> |
|||
<u-rate |
|||
size="20" |
|||
v-model="activeIconValue" |
|||
inactiveIcon="heart" |
|||
activeIcon="heart-fill" |
|||
></u-rate> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//自定义星星的个数 |
|||
value: 3, |
|||
value1: 2, |
|||
// 自定义选择星星颜色个数 |
|||
activeColorValue: 3, |
|||
// 是否允许半星的个数 |
|||
HalfValue: 3.5, |
|||
// 自定义图标星星个数 |
|||
activeIconValue: 3, |
|||
} |
|||
}, |
|||
watch: { |
|||
value(newValue, oldValue) { |
|||
// console.log(newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
// console.log('change', e); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page {} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<!-- <u-navbar |
|||
title="吸顶" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> --> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<u--text |
|||
type="content" |
|||
text="滚动页面,即可看到下方的按钮会吸顶。" |
|||
></u--text> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<u--text |
|||
type="warning" |
|||
text="目前由于nvue的bug,设置sticky的top值无效。" |
|||
></u--text> |
|||
<!-- #endif --> |
|||
</view> |
|||
<u-sticky> |
|||
<u-button |
|||
text="吸顶按钮" |
|||
type="success" |
|||
></u-button> |
|||
</u-sticky> |
|||
<u-gap |
|||
bgColor="#fff" |
|||
height="1500px" |
|||
></u-gap> |
|||
<u-divider text="已到底部"></u-divider> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mixins: [uni.$u.mixin], |
|||
methods: { |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">演示案例</text> |
|||
<view class="u-page__swipe-action-item"> |
|||
<u-swipe-action> |
|||
<u-swipe-action-item |
|||
v-if="show1" |
|||
:options="options1" |
|||
@click="click" |
|||
> |
|||
<view class="swipe-action u-border-top u-border-bottom"> |
|||
<view class="swipe-action__content"> |
|||
<text class="swipe-action__content__text">基础使用</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">按钮组</text> |
|||
<view class="u-page__swipe-action-item"> |
|||
<u-swipe-action> |
|||
<u-swipe-action-item :options="options2"> |
|||
<view class="swipe-action u-border-top u-border-bottom"> |
|||
<view class="swipe-action__content"> |
|||
<text class="swipe-action__content__text">两个按钮并列</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">带图标</text> |
|||
<view class="u-page__swipe-action-item"> |
|||
<u-swipe-action> |
|||
<u-swipe-action-item :options="options3"> |
|||
<view class="swipe-action u-border-top u-border-bottom"> |
|||
<view class="swipe-action__content"> |
|||
<text class="swipe-action__content__text">自定义图标</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">组合使用</text> |
|||
<view class="u-page__swipe-action-item"> |
|||
<u-swipe-action> |
|||
<u-swipe-action-item |
|||
:options="item.options" |
|||
v-for="(item, index) in options4" |
|||
:disabled="item.disabled" |
|||
:key="index" |
|||
> |
|||
<view |
|||
class="swipe-action u-border-top" |
|||
:class="[index === options4.length - 1 && 'u-border-bottom']" |
|||
> |
|||
<view class="swipe-action__content"> |
|||
<text class="swipe-action__content__text">{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义按钮形状</text> |
|||
<view class="u-page__swipe-action-item"> |
|||
<u-swipe-action> |
|||
<u-swipe-action-item :options="options5"> |
|||
<view class="swipe-action u-border-top u-border-bottom"> |
|||
<view class="swipe-action__content"> |
|||
<text class="swipe-action__content__text">圆形按钮</text> |
|||
</view> |
|||
</view> |
|||
</u-swipe-action-item> |
|||
</u-swipe-action> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show1: true, |
|||
moveX: 0, |
|||
showText: '当前状态：关', |
|||
showStatus: false, |
|||
options1: [{ |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#f56c6c' |
|||
} |
|||
}], |
|||
options2: [{ |
|||
text: '收藏', |
|||
style: { |
|||
backgroundColor: '#3c9cff' |
|||
} |
|||
}, { |
|||
text: '删除', |
|||
style: { |
|||
backgroundColor: '#f56c6c' |
|||
} |
|||
}], |
|||
options3: [{ |
|||
text: '收藏', |
|||
icon: 'star-fill', |
|||
iconSize: '20', |
|||
style: { |
|||
backgroundColor: '#f9ae3d' |
|||
} |
|||
}], |
|||
options4: [{ |
|||
text: '禁用状态', |
|||
disabled: true, |
|||
options: [{ |
|||
text: '置顶', |
|||
style: { |
|||
backgroundColor: '#3c9cff', |
|||
} |
|||
}, |
|||
{ |
|||
text: '取消', |
|||
style: { |
|||
backgroundColor: '#f9ae3d', |
|||
} |
|||
}, |
|||
], |
|||
}, { |
|||
text: '正常状态', |
|||
disabled: false, |
|||
options: [{ |
|||
text: '置顶', |
|||
style: { |
|||
backgroundColor: '#3c9cff', |
|||
} |
|||
}, |
|||
{ |
|||
text: '取消', |
|||
style: { |
|||
backgroundColor: '#f9ae3d', |
|||
} |
|||
}, |
|||
], |
|||
}, { |
|||
text: '自动关闭', |
|||
disabled: false, |
|||
options: [{ |
|||
text: '置顶', |
|||
style: { |
|||
backgroundColor: '#3c9cff', |
|||
} |
|||
}, |
|||
{ |
|||
text: '取消', |
|||
style: { |
|||
backgroundColor: '#f9ae3d', |
|||
} |
|||
}, |
|||
], |
|||
}], |
|||
options5: [{ |
|||
icon: 'trash-fill', |
|||
style: { |
|||
backgroundColor: '#f56c6c', |
|||
width: '40px', |
|||
height: '40px', |
|||
borderRadius: '100px', |
|||
margin: '0 6px' |
|||
} |
|||
}, { |
|||
icon: 'heart-fill', |
|||
style: { |
|||
backgroundColor: '#5ac725', |
|||
width: '40px', |
|||
height: '40px', |
|||
borderRadius: '100px', |
|||
margin: '0 6px' |
|||
} |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
click(index) { |
|||
console.log('click', index); |
|||
uni.showModal({ |
|||
title: '温馨提示', |
|||
content: '确定要删除吗？', |
|||
success: res => { |
|||
if (res.confirm) { |
|||
this.show1 = false |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
|
|||
.u-demo-block__title { |
|||
padding: 10px 0 2px 15px; |
|||
} |
|||
|
|||
.swipe-action { |
|||
&__content { |
|||
padding: 25rpx 0; |
|||
|
|||
&__text { |
|||
font-size: 15px; |
|||
color: $u-main-color; |
|||
padding-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<view> |
|||
<u-icon name="map"></u-icon> |
|||
</view> |
|||
</template> |
|||
@ -0,0 +1,164 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-gap height="20" bgColor="#fff"></u-gap> |
|||
<u-cell-group border> |
|||
<u-cell |
|||
:titleStyle="{ fontWeight: 500 }" |
|||
@click="openTransition(item.mode)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
clickable |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
<u-transition |
|||
:mode="mode" |
|||
:show="show" |
|||
:custom-style="style" |
|||
@click="click" |
|||
@beforeEnter="beforeEnter" |
|||
@enter="enter" |
|||
@afterEnter="afterEnter" |
|||
@beforeLeave="beforeLeave" |
|||
@leave="leave" |
|||
@afterLeave="afterLeave" |
|||
> |
|||
<view class="transition"></view> |
|||
</u-transition> |
|||
</u-cell-group> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
mode: "", |
|||
show: false, |
|||
style: { |
|||
position: "fixed", |
|||
top: `${uni.$u.sys().windowHeight / 2 - 50}px`, |
|||
left: `${uni.$u.sys().windowWidth / 2 - 50}px`, |
|||
width: "120px", |
|||
height: "120px", |
|||
backgroundColor: "#1989fa", |
|||
}, |
|||
list: [ |
|||
{ |
|||
mode: "fade", |
|||
title: "淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fade.png", |
|||
}, |
|||
{ |
|||
mode: "fade-up", |
|||
title: "上滑淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fadeUp.png", |
|||
}, |
|||
{ |
|||
mode: "zoom", |
|||
title: "缩放", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/zoom.png", |
|||
}, |
|||
{ |
|||
mode: "fade-zoom", |
|||
title: "缩放淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fadeZoom.png", |
|||
}, |
|||
{ |
|||
mode: "fade-down", |
|||
title: "下滑淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fadeDown.png", |
|||
}, |
|||
{ |
|||
mode: "fade-left", |
|||
title: "左滑淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fadeLeft.png", |
|||
}, |
|||
{ |
|||
mode: "fade-right", |
|||
title: "右滑淡入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/fadeRight.png", |
|||
}, |
|||
{ |
|||
mode: "slide-up", |
|||
title: "上滑进入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/slideUp.png", |
|||
}, |
|||
{ |
|||
mode: "slide-down", |
|||
title: "下滑进入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/slideDown.png", |
|||
}, |
|||
{ |
|||
mode: "slide-left", |
|||
title: "左滑进入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/slideLeft.png", |
|||
}, |
|||
{ |
|||
mode: "slide-right", |
|||
title: "右滑进入", |
|||
iconUrl: |
|||
"https://cdn.uviewui.com/uview/demo/transition/slideRight.png", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mixins: [uni.$u.mixin], |
|||
methods: { |
|||
openTransition(mode) { |
|||
this.mode = mode; |
|||
this.show = true; |
|||
setTimeout(() => { |
|||
this.show = false; |
|||
}, 1500); |
|||
}, |
|||
click() { |
|||
// console.log("click"); |
|||
}, |
|||
beforeEnter() { |
|||
// console.log("beforeEnter"); |
|||
}, |
|||
enter() { |
|||
// console.log("enter"); |
|||
}, |
|||
afterEnter() { |
|||
// console.log("afterEnter"); |
|||
}, |
|||
beforeLeave() { |
|||
// console.log("beforeLeave"); |
|||
}, |
|||
leave() { |
|||
// console.log("leave"); |
|||
}, |
|||
afterLeave() { |
|||
// console.log("afterLeave"); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
|
|||
.transition { |
|||
background-color: $u-primary; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="上拉菜单" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-cell-group> |
|||
<u-cell |
|||
@click="openSheet(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-action-sheet |
|||
:show="show0" |
|||
@close="close" |
|||
@select="select" |
|||
:actions="actions0" |
|||
:closeOnClickOverlay="false" |
|||
> |
|||
</u-action-sheet> |
|||
<u-action-sheet |
|||
:show="show1" |
|||
@close="show1 = false" |
|||
:actions="actions1" |
|||
> |
|||
</u-action-sheet> |
|||
<u-action-sheet |
|||
:show="show2" |
|||
@close="show2 = false" |
|||
:actions="actions2" |
|||
cancelText="取消" |
|||
> |
|||
</u-action-sheet> |
|||
<u-action-sheet |
|||
:show="show3" |
|||
@close="show3 = false" |
|||
:actions="actions3" |
|||
description="这是一段描述文本,字号偏小,颜色偏淡" |
|||
> |
|||
</u-action-sheet> |
|||
<u-action-sheet |
|||
:show="show4" |
|||
@close="show4 = false" |
|||
title="标题位置" |
|||
:round="10" |
|||
> |
|||
<text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text> |
|||
</u-action-sheet> |
|||
<u-action-sheet |
|||
:show="show5" |
|||
@close="show5 = false" |
|||
title="微信开放能力" |
|||
:actions="actions5" |
|||
@getuserinfo="getuserinfo" |
|||
></u-action-sheet> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show0: false, |
|||
show1: false, |
|||
show2: false, |
|||
show3: false, |
|||
show4: false, |
|||
show5: false, |
|||
actions0: [{ |
|||
name: '选项1', |
|||
}, |
|||
{ |
|||
name: '选项2', |
|||
}, |
|||
{ |
|||
name: '选项3', |
|||
subname: '描述文本' |
|||
}, |
|||
], |
|||
actions1: [{ |
|||
name: '选项1', |
|||
}, |
|||
{ |
|||
loading: true |
|||
}, |
|||
{ |
|||
name: '选项被禁用', |
|||
disabled: true |
|||
}, |
|||
], |
|||
actions2: [{ |
|||
name: '选项1', |
|||
}, |
|||
{ |
|||
name: '选项2', |
|||
}, |
|||
{ |
|||
name: '选项3', |
|||
}, |
|||
], |
|||
actions3: [{ |
|||
name: '选项1', |
|||
}, |
|||
{ |
|||
name: '选项2', |
|||
}, |
|||
{ |
|||
name: '选项3', |
|||
}, |
|||
], |
|||
actions5: [{ |
|||
name: '获取用户信息', |
|||
openType: 'getUserInfo', |
|||
color: uni.$u.color['success'] |
|||
}], |
|||
list: [{ |
|||
title: '普通使用', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png' |
|||
|
|||
}, |
|||
{ |
|||
title: '设置状态', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png' |
|||
}, |
|||
{ |
|||
title: '显示取消按钮', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png' |
|||
}, |
|||
{ |
|||
title: '描述内容', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png' |
|||
}, |
|||
{ |
|||
title: '显示标题(显示圆角)', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png' |
|||
}, |
|||
{ |
|||
title: '微信开放能力', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 点击cell，判断显示哪个功能 |
|||
openSheet(index) { |
|||
// #ifndef MP |
|||
if (index === 5) return uni.$u.toast('请在微信内预览') |
|||
// #endif |
|||
this[`show${index}`] = true |
|||
}, |
|||
getuserinfo(res) { |
|||
uni.$u.toast(`用户名：${res.userInfo.nickName}`) |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
close() { |
|||
console.log('close'); |
|||
this['show0'] = false |
|||
}, |
|||
select(e) { |
|||
console.log('select', e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="山不在于高，有了神仙就出名" |
|||
type="warning" |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="水不在深，有龙则灵" |
|||
type="primary" |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青" |
|||
type="error" |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="谈笑有鸿儒，往来无白丁" |
|||
type="info" |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="可以调素琴，阅金经" |
|||
type="success" |
|||
></u-alert> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">深浅色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="无丝竹之乱耳，无案牍之劳形" |
|||
type="warning" |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" |
|||
type="warning" |
|||
effect="dark" |
|||
></u-alert> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="六王毕，四海一；蜀山兀，阿房出" |
|||
type="error" |
|||
showIcon |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="覆压三百余里，隔离天日。骊山北构而西折，直走咸阳，二川溶溶，流入宫墙" |
|||
type="error" |
|||
effect="dark" |
|||
showIcon |
|||
></u-alert> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可关闭</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角" |
|||
type="success" |
|||
showIcon |
|||
closable |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落" |
|||
type="success" |
|||
effect="dark" |
|||
closable |
|||
showIcon |
|||
></u-alert> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">带标题</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
title="妃嫔媵嫱，王子皇孙，辞楼下殿" |
|||
description="长桥卧波，未云何龙？复道行空，不霁何虹" |
|||
type="info" |
|||
showIcon |
|||
closable |
|||
></u-alert> |
|||
</view> |
|||
<view class="u-alert-item"> |
|||
<u-alert |
|||
title="辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也" |
|||
description="高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐" |
|||
type="info" |
|||
effect="dark" |
|||
closable |
|||
showIcon |
|||
></u-alert> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
description: '', |
|||
title: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-alert-item { |
|||
flex: 1; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: column !important; |
|||
align-items: stretch; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,163 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">直角边形状</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="1500" |
|||
shape="horn" |
|||
></u-badge> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">徽标数显示方式</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="5132" |
|||
numberType="ellipsis" |
|||
></u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="1011" |
|||
numberType="overflow" |
|||
></u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="1500" |
|||
numberType="limit" |
|||
></u-badge> |
|||
</view> |
|||
|
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="45187" |
|||
numberType="limit" |
|||
></u-badge> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示圆点</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="1011" |
|||
numberType="overflow" |
|||
isDot |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义主题</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="9" |
|||
type="error" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="9" |
|||
type="warning" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="9" |
|||
type="success" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="9" |
|||
type="primary" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">反转色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="9" |
|||
type="error" |
|||
inverted |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="1532" |
|||
inverted |
|||
type="warning" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="12" |
|||
inverted |
|||
type="success" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-badge |
|||
:value="999" |
|||
inverted |
|||
type="primary" |
|||
> |
|||
</u-badge> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.box { |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.u-page__tag-item { |
|||
margin-right: 40px; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.badge-box { |
|||
width: 45px; |
|||
height: 45px; |
|||
border-top-left-radius: 3px; |
|||
border-top-right-radius: 3px; |
|||
border-bottom-left-radius: 3px; |
|||
border-bottom-right-radius: 3px; |
|||
background-color: #E6E6E6; |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code |
|||
ref="uCode" |
|||
@change="codeChange" |
|||
seconds="20" |
|||
change-text="XS获取" |
|||
@start="disabled1 = true" |
|||
@end="disabled1 = false" |
|||
></u-code> |
|||
<u-button |
|||
@tap="getCode" |
|||
:text="tips" |
|||
type="success" |
|||
size="small" |
|||
:disabled="disabled1" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">保持倒计时(开始后，左上角返退出此页面再进入，会发现倒计时还在继续)</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code |
|||
ref="uCode1" |
|||
@change="codeChange1" |
|||
keep-running |
|||
change-text="倒计时XS" |
|||
@start="disabled2 = true" |
|||
@end="disabled2 = false" |
|||
></u-code> |
|||
<u-button |
|||
type="primary" |
|||
@tap="getCode1" |
|||
:text="tips1" |
|||
size="small" |
|||
:disabled="disabled2" |
|||
></u-button> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">文本样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code |
|||
ref="uCode2" |
|||
@change="codeChange2" |
|||
keep-running |
|||
start-text="点我获取验证码" |
|||
></u-code> |
|||
<text |
|||
@tap="getCode2" |
|||
:text="tips2" |
|||
class="u-page__code-text" |
|||
>{{tips2}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tips: '', |
|||
// 此为错误定义，见下方说明 |
|||
// refCode: null, |
|||
tips1: '', |
|||
tips2: '', |
|||
disabled1: false, |
|||
disabled2: false, |
|||
disabled3: false |
|||
} |
|||
}, |
|||
onReady() { |
|||
// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会 |
|||
// 造成循环引用而报错，如果你想这样做，请在onReady或者onLoad生命周期中定义，如下 |
|||
// this.refCode = this.$refs.uCode; |
|||
}, |
|||
methods: { |
|||
codeChange(text) { |
|||
this.tips = text; |
|||
}, |
|||
codeChange1(text) { |
|||
this.tips1 = text; |
|||
}, |
|||
codeChange2(text) { |
|||
this.tips2 = text; |
|||
}, |
|||
getCode() { |
|||
if (this.$refs.uCode.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
uni.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode.start(); |
|||
}, 2000); |
|||
} else { |
|||
uni.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
getCode1() { |
|||
if (this.$refs.uCode1.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
uni.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode1.start(); |
|||
}, 2000); |
|||
} else { |
|||
uni.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
getCode2() { |
|||
if (this.$refs.uCode2.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
uni.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode2.start(); |
|||
}, 2000); |
|||
} else { |
|||
uni.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__code-text { |
|||
color: $u-primary; |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
@include flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">基础功能</text> |
|||
<u-collapse |
|||
@change="change" |
|||
@close="close" |
|||
@open="open" |
|||
> |
|||
<u-collapse-item |
|||
title="文档指南" |
|||
name="Docs guide" |
|||
> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="组件全面" |
|||
name="Variety components" |
|||
> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="众多利器" |
|||
name="Numerous tools" |
|||
> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">展开和禁用</text> |
|||
<u-collapse |
|||
:value="['2']" |
|||
> |
|||
<u-collapse-item |
|||
title="文档指南" |
|||
> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
disabled |
|||
title="组件全面" |
|||
> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
name="2" |
|||
title="众多利器" |
|||
> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">手风琴模式</text> |
|||
<u-collapse |
|||
accordion |
|||
> |
|||
<u-collapse-item |
|||
title="文档指南" |
|||
> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="组件全面" |
|||
> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="众多利器" |
|||
> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">移除下划线</text> |
|||
<u-collapse |
|||
accordion |
|||
:border="false" |
|||
> |
|||
<u-collapse-item |
|||
title="文档指南" |
|||
> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="组件全面" |
|||
> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="众多利器" |
|||
> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" slot="title" />的写法 --> |
|||
<!-- #ifndef MP-WEIXIN --> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义标题和内容</text> |
|||
<u-collapse |
|||
accordion |
|||
> |
|||
<u-collapse-item |
|||
> |
|||
<text slot="title" class="u-page__item__title__slot-title">文档指南</text> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> |
|||
<!-- <u-collapse-item |
|||
:isLink="false" |
|||
> |
|||
<text slot="title" class="u-page__item__title__slot-title">文档指南</text> |
|||
<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text> |
|||
</u-collapse-item> --> |
|||
<u-collapse-item |
|||
title="组件全面" |
|||
> |
|||
<u-icon name="tags-fill" size="20" slot="icon"></u-icon> |
|||
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text> |
|||
</u-collapse-item> |
|||
<u-collapse-item |
|||
title="众多利器" |
|||
> |
|||
<text slot="value" class="u-page__item__title__slot-title">自定义内容</text> |
|||
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text> |
|||
</u-collapse-item> |
|||
</u-collapse> |
|||
</view> |
|||
<!-- #endif --> |
|||
<u-gap height="50"></u-gap> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
methods: { |
|||
open(e) { |
|||
// console.log('open', e) |
|||
}, |
|||
close(e) { |
|||
// console.log('close', e) |
|||
}, |
|||
change(e) { |
|||
// console.log('change', e) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
|
|||
&__item { |
|||
|
|||
&__title { |
|||
color: $u-tips-color; |
|||
background-color: $u-bg-color; |
|||
padding: 15px; |
|||
font-size: 15px; |
|||
|
|||
&__slot-title { |
|||
color: $u-primary; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-collapse-content { |
|||
color: $u-tips-color; |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title" style="margin-top: 0;">主色调</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #3c9cff;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Primary</text> |
|||
<text class="u-page__item__color-box__item__value">#3c9cff</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #398ade;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Dark</text> |
|||
<text class="u-page__item__color-box__item__value">#398ade</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #9acafc;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Disabled</text> |
|||
<text class="u-page__item__color-box__item__value">#9acafc</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #ecf5ff;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#ecf5ff</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">Error</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f56c6c;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Error</text> |
|||
<text class="u-page__item__color-box__item__value">#f56c6c</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #e45656;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Dark</text> |
|||
<text class="u-page__item__color-box__item__value">#e45656</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f7b2b2;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Disabled</text> |
|||
<text class="u-page__item__color-box__item__value">#f7b2b2</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #fef0f0;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#fef0f0</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">Warning</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f9ae3d;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Warning</text> |
|||
<text class="u-page__item__color-box__item__value">#f9ae3d</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f1a532;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Dark</text> |
|||
<text class="u-page__item__color-box__item__value">#f1a532</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f9d39b;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Disabled</text> |
|||
<text class="u-page__item__color-box__item__value">#f9d39b</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #fdf6ec;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#fdf6ec</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">Info</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #909399;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Info</text> |
|||
<text class="u-page__item__color-box__item__value">#909399</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #767a82;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Dark</text> |
|||
<text class="u-page__item__color-box__item__value">#767a82</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #c4c6c9;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Disabled</text> |
|||
<text class="u-page__item__color-box__item__value">#c4c6c9</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f4f4f5;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#f4f4f5</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">Success</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #5ac725;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Success</text> |
|||
<text class="u-page__item__color-box__item__value">#5ac725</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #53c21d;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Dark</text> |
|||
<text class="u-page__item__color-box__item__value">#53c21d</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #a9e08f;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">Disabled</text> |
|||
<text class="u-page__item__color-box__item__value">#a9e08f</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f5fff0;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">Light</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#f5fff0</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">文字颜色</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #303133;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">主要文字</text> |
|||
<text class="u-page__item__color-box__item__value">#303133</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #606266;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">常规文字</text> |
|||
<text class="u-page__item__color-box__item__value">#606266</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #909399;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">次要文字</text> |
|||
<text class="u-page__item__color-box__item__value">#909399</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #c0c4cc;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title">占位文字</text> |
|||
<text class="u-page__item__color-box__item__value">#c0c4cc</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">边框颜色</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #9a9998;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title ">一级边框</text> |
|||
<text class="u-page__item__color-box__item__value ">#9a9998</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #b4b3b1;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title ">二级边框</text> |
|||
<text class="u-page__item__color-box__item__value ">#b4b3b1</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #ceccca;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title ">三级边框</text> |
|||
<text class="u-page__item__color-box__item__value ">#ceccca</text> |
|||
</view> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #e7e6e4;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">四级边框</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#e7e6e4</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">背景颜色</text> |
|||
<view class="u-page__item__color-box"> |
|||
<view |
|||
class="u-page__item__color-box__item" |
|||
style="background-color: #f3f4f6;" |
|||
> |
|||
<text class="u-page__item__color-box__item__title u-tips-color">背景颜色</text> |
|||
<text class="u-page__item__color-box__item__value u-tips-color">#f3f4f6</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 15px; |
|||
|
|||
&__item { |
|||
|
|||
&__title { |
|||
font-size: 15px; |
|||
color: $u-content-color; |
|||
margin-top: 16px; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
&__color-box { |
|||
@include flex; |
|||
justify-content: space-between; |
|||
|
|||
&__item { |
|||
width: 160rpx; |
|||
@include flex(column); |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 5px 0; |
|||
border-radius: 3px; |
|||
|
|||
&__title { |
|||
font-size: 13px; |
|||
color: #fff; |
|||
} |
|||
|
|||
&__value { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-tips-color { |
|||
color: $u-tips-color; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础用法</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-count-down |
|||
:time="30 * 60 * 60 * 1000" |
|||
format="HH:mm:ss" |
|||
autoStart |
|||
millisecond |
|||
@finish="finish" |
|||
> |
|||
</u-count-down> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义格式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-count-down |
|||
:time="30 * 60 * 60 * 1000" |
|||
format="DD:HH:mm:ss" |
|||
autoStart |
|||
millisecond |
|||
@change="onChange" |
|||
> |
|||
<view class="time"> |
|||
<text class="time__item">{{ timeData.days }} 天</text> |
|||
<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}} 时</text> |
|||
<text class="time__item">{{ timeData.minutes }} 分</text> |
|||
<text class="time__item">{{ timeData.seconds }} 秒</text> |
|||
</view> |
|||
</u-count-down> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">毫秒级渲染</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-count-down |
|||
:time="30 * 60 * 60 * 1000" |
|||
format="HH:mm:ss:SSS" |
|||
autoStart |
|||
millisecond |
|||
> |
|||
</u-count-down> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-count-down |
|||
:time="30 * 60 * 60 * 1000" |
|||
format="HH:mm:ss" |
|||
autoStart |
|||
millisecond |
|||
@change="onChange" |
|||
> |
|||
<view class="time"> |
|||
<view class="time__custom"> |
|||
<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text> |
|||
</view> |
|||
<text class="time__doc">:</text> |
|||
<view class="time__custom"> |
|||
<text class="time__custom__item">{{ timeData.minutes }}</text> |
|||
</view> |
|||
<text class="time__doc">:</text> |
|||
<view class="time__custom"> |
|||
<text class="time__custom__item">{{ timeData.seconds }}</text> |
|||
</view> |
|||
</view> |
|||
</u-count-down> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">手动控制</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-count-down |
|||
ref="countDown" |
|||
:time="3* 1000" |
|||
format="ss:SSS" |
|||
:autoStart="false" |
|||
millisecond |
|||
@change="onChange" |
|||
> |
|||
</u-count-down> |
|||
</view> |
|||
<u-grid |
|||
:border="true" |
|||
:customStyle="{marginTop:10+'px'}" |
|||
> |
|||
<u-grid-item @click="reset"> |
|||
<view class="count-down__grid-item"> |
|||
<u-icon |
|||
name="reload" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="count-down__grid-item__grid-text">重置</text> |
|||
</view> |
|||
</u-grid-item> |
|||
<u-grid-item @click="start"> |
|||
<view class="count-down__grid-item"> |
|||
<view class="count-down__grid-item__circle"> |
|||
<u-icon |
|||
color="#fff" |
|||
name="play-right-fill" |
|||
:size="22" |
|||
></u-icon> |
|||
</view> |
|||
<text class="count-down__grid-item__grid-text">开始</text> |
|||
</view> |
|||
</u-grid-item> |
|||
<u-grid-item @click="pause"> |
|||
<view class="count-down__grid-item"> |
|||
<u-icon |
|||
name="pause-circle" |
|||
:size="22" |
|||
></u-icon> |
|||
<text class="count-down__grid-item__grid-text">暂停</text> |
|||
</view> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
timeData: {}, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
//开始 |
|||
start() { |
|||
this.$refs.countDown.start(); |
|||
}, |
|||
// 暂停 |
|||
pause() { |
|||
this.$refs.countDown.pause(); |
|||
}, |
|||
// 重置 |
|||
reset() { |
|||
this.$refs.countDown.reset(); |
|||
}, |
|||
onChange(e) { |
|||
this.timeData = e |
|||
}, |
|||
finish() { |
|||
console.log('finish'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
|
|||
} |
|||
|
|||
.time { |
|||
@include flex; |
|||
align-items: center; |
|||
|
|||
&__custom { |
|||
margin-top: 4px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background-color: $u-primary; |
|||
border-radius: 4px; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
&__item { |
|||
color: #fff; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
&__doc { |
|||
color: $u-primary; |
|||
padding: 0px 4px; |
|||
} |
|||
|
|||
&__item { |
|||
color: #606266; |
|||
font-size: 15px; |
|||
margin-right: 4px; |
|||
} |
|||
} |
|||
|
|||
.u-view { |
|||
padding: 40px 20px 0px 20px; |
|||
|
|||
&__title { |
|||
font-size: 14px; |
|||
color: rgb(143, 156, 162); |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
// 手动控制的btn样式 |
|||
.count-down { |
|||
&__grid-item { |
|||
width: 70px; |
|||
height: 70px; |
|||
@include flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
&__circle { |
|||
width: 32px; |
|||
height: 32px; |
|||
border-radius: 32px; |
|||
background-color: $u-primary; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
box-shadow: 1px 1px 4px rgba(155, 191, 255, .7); |
|||
} |
|||
|
|||
&__grid-text { |
|||
font-size: 14px; |
|||
color: #909399; |
|||
/* #ifndef APP-PLUS */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
margin-left: 6px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to |
|||
:endVal="value" |
|||
@end="end" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">倒计数</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to :startVal="startVal1"></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示小数位</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to |
|||
:startVal="startVal2" |
|||
:endVal="endVal" |
|||
:decimals="decimals" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">千分位分隔符</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to |
|||
:startVal="startVal3" |
|||
:endVal="endVal2" |
|||
separator="," |
|||
:decimals="decimals" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义控制</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to |
|||
ref="uCountTo" |
|||
:endVal="endVal3" |
|||
:autoplay="autoplay" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content"> |
|||
<view |
|||
class="" |
|||
style="flex: 1;" |
|||
> |
|||
<u-grid |
|||
border |
|||
align="center" |
|||
customStyle="margin-top: 20px;margin-bottom: 20" |
|||
> |
|||
<u-grid-item @click="start"> |
|||
<view class="u-grid-slot"> |
|||
<view class="u-grid-slot__circle"> |
|||
<text class="u-grid-slot__circle__text">开始</text> |
|||
</view> |
|||
</view> |
|||
</u-grid-item> |
|||
<u-grid-item @click="paused"> |
|||
<view class="u-grid-slot"> |
|||
<view class="u-grid-slot__circle"> |
|||
<text class="u-grid-slot__circle__text">暂停</text> |
|||
</view> |
|||
</view> |
|||
</u-grid-item> |
|||
<u-grid-item @click="resume"> |
|||
<view class="u-grid-slot"> |
|||
<view class="u-grid-slot__circle"> |
|||
<text class="u-grid-slot__circle__text">继续</text> |
|||
</view> |
|||
</view> |
|||
</u-grid-item> |
|||
</u-grid> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-count-to |
|||
:endVal="value" |
|||
color="#909399" |
|||
:fontSize="fontSize" |
|||
:bold="true" |
|||
></u-count-to> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value: 3000, |
|||
startVal1: 300, |
|||
startVal2: 100.00, |
|||
endVal: 10.55, |
|||
decimals: 2, |
|||
startVal3: 2000, |
|||
endVal2: 1542, |
|||
endVal3: 3000, |
|||
autoplay: false, |
|||
color: '#FF0000', |
|||
fontSize: 40, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// setTimeout(() => { |
|||
// this.value = 3000 |
|||
// }, 3000) |
|||
}, |
|||
methods: { |
|||
start() { |
|||
this.$refs.uCountTo.start(); |
|||
}, |
|||
paused() { |
|||
this.$refs.uCountTo.stop() |
|||
}, |
|||
resume() { |
|||
this.$refs.uCountTo.resume() |
|||
}, |
|||
end() { |
|||
console.log('end'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-grid-slot { |
|||
border-radius: 100px; |
|||
border-color: #dbfbdb; |
|||
border-width: 2px; |
|||
@include flex; |
|||
|
|||
&__circle { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-color: #dbfbdb; |
|||
border-radius: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 2px; |
|||
|
|||
&__text { |
|||
color: rgb(25, 190, 107); |
|||
font-size: 13px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-dropdown> |
|||
<u-dropdown-item title="标题1"> |
|||
<view class="" style="height: 300px;"> |
|||
123 |
|||
</view> |
|||
</u-dropdown-item> |
|||
<u-dropdown-item title="标题2"> |
|||
456 |
|||
</u-dropdown-item> |
|||
<u-dropdown-item title="标题3"> |
|||
789 |
|||
</u-dropdown-item> |
|||
<u-dropdown-item title="标题4"> |
|||
abc |
|||
</u-dropdown-item> |
|||
</u-dropdown> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="键盘" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-gap height="20" bgColor="#fff"></u-gap> |
|||
<u-cell-group> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openKeyboard(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-keyboard |
|||
:mode="keyData.mode" |
|||
:dotDisabled="keyData.dotDisabled" |
|||
:random='keyData.random' |
|||
:show="show" |
|||
@close="close" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
@change="change" |
|||
@backspace="backspace" |
|||
></u-keyboard> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
input: '', |
|||
keyData: { |
|||
mode: '', |
|||
dotDisabled: false, |
|||
random: false, |
|||
}, |
|||
list: [{ |
|||
title: '车牌号键盘', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png' |
|||
}, |
|||
{ |
|||
title: '数字键盘', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png' |
|||
}, |
|||
{ |
|||
title: '身份证键盘', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png' |
|||
}, |
|||
{ |
|||
title: '隐藏键盘"."符号', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png' |
|||
}, |
|||
{ |
|||
title: '打乱键盘按键的顺序', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png' |
|||
}, |
|||
], |
|||
show: false |
|||
} |
|||
}, |
|||
methods: { |
|||
navigateBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
// 点击展示不同的键盘 |
|||
openKeyboard(indexNum) { |
|||
this.keyData = { |
|||
mode: '', |
|||
dotDisabled: false, |
|||
random: false, |
|||
} |
|||
if (indexNum == 0) { |
|||
this.keyData.mode = '' |
|||
} else if (indexNum == 1) { |
|||
this.keyData.mode = 'number' |
|||
} else if (indexNum == 2) { |
|||
this.keyData.mode = 'card' |
|||
} else if (indexNum == 3) { |
|||
this.keyData.mode = 'number' |
|||
this.keyData.dotDisabled = true |
|||
} else if (indexNum == 4) { |
|||
this.keyData.mode = 'number' |
|||
this.keyData.random = true |
|||
} |
|||
this.input = '' |
|||
this.show = true |
|||
}, |
|||
change(e) { |
|||
// console.log('change'); |
|||
this.input += e |
|||
}, |
|||
close() { |
|||
// console.log('close'); |
|||
this.show = false |
|||
}, |
|||
cancel() { |
|||
// console.log('cancel'); |
|||
this.show = false |
|||
}, |
|||
confirm() { |
|||
// console.log('confirm'); |
|||
this.show = false |
|||
}, |
|||
backspace() { |
|||
this.input = this.input.slice(0, -1) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text1" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可关闭</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text5" |
|||
mode="closable" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义横向滚动速度</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text2" |
|||
speed="250" |
|||
mode="closable" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可跳转(点击右箭头)</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text3" |
|||
mode="link" |
|||
url="/pages/componentsB/tag/tag" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横向步进滚动</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text4" |
|||
:step="true" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">纵向滚动</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text4" |
|||
direction="column" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-notice-bar |
|||
:text="text1" |
|||
color="#ffffff" |
|||
bgColor="#f56c6c" |
|||
></u-notice-bar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用', |
|||
text2: 'uView UI众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨', |
|||
text3: 'uView UI收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍', |
|||
text4: [ |
|||
'寒雨连江夜入吴', |
|||
'平明送客楚山孤', |
|||
'洛阳亲友如相问', |
|||
'一片冰心在玉壶' |
|||
], |
|||
text5: '涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
click() { |
|||
|
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-demo-block__content { |
|||
@include flex(column); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-gap |
|||
height="30" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<u-cell-group> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
@click="openNotify(item.notifyData)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-notify ref="uNotify"></u-notify> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'primary', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 3000, |
|||
}, |
|||
list: [{ |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'primary', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 3000 |
|||
}, |
|||
title: '主要通知', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/main.png' |
|||
}, { |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'success', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 3000, |
|||
safeAreaInsetTop: false |
|||
}, |
|||
title: '成功通知', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/success.png' |
|||
}, { |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'error', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 14, |
|||
duration: 3000, |
|||
safeAreaInsetTop: false |
|||
}, |
|||
title: '危险通知', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/error.png' |
|||
}, { |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'warning', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 3000, |
|||
safeAreaInsetTop: false |
|||
}, |
|||
title: '警告通知', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/warning.png' |
|||
}, |
|||
{ |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
color: '#fff', |
|||
bgColor: '#000', |
|||
fontSize: 15, |
|||
duration: 3000, |
|||
safeAreaInsetTop: false |
|||
}, |
|||
title: '自定义样式', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customStyle.png' |
|||
}, |
|||
{ |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
type: 'primary', |
|||
color: '#ffffff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 6000, |
|||
safeAreaInsetTop: false |
|||
}, |
|||
title: '自定义时间', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customTime.png' |
|||
}, |
|||
{ |
|||
notifyData: { |
|||
message: 'notify顶部提示', |
|||
color: '#fff', |
|||
bgColor: '', |
|||
fontSize: 15, |
|||
duration: 3000, |
|||
safeAreaInsetTop: true |
|||
}, |
|||
title: '插入状态栏高度', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/height.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
openNotify(params) { |
|||
this.$refs.uNotify.show({ |
|||
...params |
|||
}) |
|||
// 也可以通过主题形式调用，如： |
|||
// this.$refs.uNotify.primary('Primary主题') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,250 @@ |
|||
<template> |
|||
<view class=""> |
|||
<u-cell-group :border="true"> |
|||
<u-cell |
|||
:border="true" |
|||
title="基础用法" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value1" |
|||
step="1" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="步长设置" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value2" |
|||
:step="step1" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="限制输入范围" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value3" |
|||
step="1" |
|||
:min="min1" |
|||
:max="max1" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="限制输入整数" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value4" |
|||
step="1" |
|||
integer |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="禁用状态" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value5" |
|||
step="1" |
|||
:disabled="true" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="禁用输入框" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value6" |
|||
step="1" |
|||
:disabledInput="true" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="禁用长按" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value7" |
|||
step="1" |
|||
:longPress="false" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="固定小数位数" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value8" |
|||
step="0.2" |
|||
decimalLength="1" |
|||
@change="change" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="异步变更" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value9" |
|||
step="1" |
|||
:asyncChange="asyncChange" |
|||
@change="myAsyncChange" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="自定义大小颜色样式" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value10" |
|||
step="1" |
|||
:color="color" |
|||
:buttonSize="buttonSize" |
|||
:bgColor="bgColor" |
|||
@change="change" |
|||
iconStyle="color: #fff" |
|||
> |
|||
</u-number-box> |
|||
</u-cell> |
|||
<u-cell |
|||
:border="true" |
|||
title="自定义(为0时减少按钮会消失)" |
|||
> |
|||
<u-number-box |
|||
slot="right-icon" |
|||
v-model="value11" |
|||
step="1" |
|||
:min="0" |
|||
:showMinus="value11 > 0" |
|||
> |
|||
<view |
|||
slot="minus" |
|||
class="minus" |
|||
> |
|||
<u-icon |
|||
name="minus" |
|||
size="12" |
|||
></u-icon> |
|||
</view> |
|||
<text |
|||
slot="input" |
|||
style="width: 50px;text-align: center;" |
|||
class="input" |
|||
>{{value11}}</text> |
|||
<view |
|||
slot="plus" |
|||
class="plus" |
|||
> |
|||
<u-icon |
|||
name="plus" |
|||
color="#FFFFFF" |
|||
size="12" |
|||
></u-icon> |
|||
</view> |
|||
</u-number-box> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: 3, |
|||
value2: 3, |
|||
value3: 3, |
|||
value4: 3, |
|||
value5: 3, |
|||
value6: 3, |
|||
value7: 3, |
|||
value8: 3.1, |
|||
value9: 3, |
|||
value10: 3, |
|||
value11: 3, |
|||
step1: 2, |
|||
min1: 5, |
|||
max1: 8, |
|||
asyncChange: true, |
|||
color: '#FFFFFF', |
|||
buttonSize: 36, |
|||
bgColor: '#2979ff' |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
console.log('change', e); |
|||
}, |
|||
myAsyncChange(e) { |
|||
this.asyncChange = false |
|||
uni.showLoading({ |
|||
title: '正在加载' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading() |
|||
this.value9 = e |
|||
this.asyncChange = true |
|||
}, 3000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.minus { |
|||
width: 22px; |
|||
height: 22px; |
|||
border-width: 1px; |
|||
border-color: #E6E6E6; |
|||
border-top-left-radius: 100px; |
|||
border-top-right-radius: 100px; |
|||
border-bottom-left-radius: 100px; |
|||
border-bottom-right-radius: 100px; |
|||
@include flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.input { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.plus { |
|||
width: 22px; |
|||
height: 22px; |
|||
background-color: #FF0000; |
|||
border-radius: 50%; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
/** |
|||
* @fileoverview 用于测试的 html 内容 |
|||
*/ |
|||
module.exports = `<title>富文本示例</title>
|
|||
<div> |
|||
<section style="text-align: center; margin: 0px auto;"> |
|||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"> |
|||
<span style="font-size: 18px; color: #595959;">表格</span> |
|||
</section> |
|||
</section> |
|||
<section style="margin-top: 1.5em;"> |
|||
<table width="100%" cellspacing="0" cellpadding="5"> |
|||
<thead> |
|||
<tr> |
|||
<th>标题 1</th> |
|||
<th>标题 2</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td align="center">内容 1</td> |
|||
<td align="center">内容 2</td> |
|||
</tr> |
|||
<tr style="background-color: #f6f8fa;"> |
|||
<td align="center">内容 3</td> |
|||
<td align="center"><a>链接</a></td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center">内容 5</td> |
|||
<td align="center">内容 6</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">普通表格</div> |
|||
</section> |
|||
<section style="margin-top: 1.5em;"> |
|||
<table width="500px" cellspacing="0" cellpadding="5"> |
|||
<thead> |
|||
<tr> |
|||
<th>标题 1</th> |
|||
<th>标题 2</th> |
|||
<th>标题 3</th> |
|||
<th>标题 4</th> |
|||
<th>标题 5</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td align="center">内容 1</td> |
|||
<td align="center">内容 2</td> |
|||
<td align="center">内容 3</td> |
|||
<td align="center">内容 4</td> |
|||
<td align="center">内容 5</td> |
|||
</tr> |
|||
<tr style="background-color: #f6f8fa;"> |
|||
<td align="center"><a>链接</a></td> |
|||
<td align="center">内容 7</td> |
|||
<td align="center">内容 8</td> |
|||
<td align="center">内容 9</td> |
|||
<td align="center">内容 10</td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center">内容 11</td> |
|||
<td align="center">内容 12</td> |
|||
<td align="center">内容 13</td> |
|||
<td align="center">内容 14</td> |
|||
<td align="center">内容 15</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">长表格，可以单独横向滚动</div> |
|||
</section> |
|||
<section style="margin-top: 1.5em;"> |
|||
<table width="100%" cellspacing="0" cellpadding="5"> |
|||
<thead> |
|||
<tr> |
|||
<th align="center">标题 1</th> |
|||
<th align="center">标题 2</th> |
|||
<th align="center">标题 3</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td align="center" colspan="2">内容 1</td> |
|||
<td align="center" rowspan="2">内容 2</td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center" rowspan="2">内容 3</td> |
|||
<td align="center">内容 4</td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center" colspan="2">内容 5</td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center">内容 6</td> |
|||
<td align="center">内容 7</td> |
|||
<td align="center"><a>链接</a></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">含有合并单元格的表格</div> |
|||
</section> |
|||
<section id="list" style="text-align: center; margin: 0px auto; margin-top: 2em"> |
|||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"> |
|||
<span style="font-size: 18px; color: #595959;">列表</span> |
|||
</section> |
|||
</section> |
|||
<section style="margin-top: 1.5em;"> |
|||
<ol style="margin-bottom: 1.5em;"> |
|||
<li>这是第一条列表项</li> |
|||
<li>这是第二条列表项</li> |
|||
<li>这是第三条 <a>链接</a></li> |
|||
</ol> |
|||
<ol type="A" style="margin-bottom: 1.5em;"> |
|||
<li>这是第一条列表项</li> |
|||
<li>这是第二条列表项</li> |
|||
<li>这是第三条 <a>链接</a></li> |
|||
</ol> |
|||
<ol type="I" style="margin-bottom: 1.5em;"> |
|||
<li>这是第一条列表项</li> |
|||
<li>这是第二条列表项</li> |
|||
<li>这是第三条 <a>链接</a></li> |
|||
</ol> |
|||
<ul> |
|||
<li>第一级无序列表</li> |
|||
<li>第一级无序列表 |
|||
<ul> |
|||
<li>第二级无序列表</li> |
|||
<li>第二级无序列表 |
|||
<ul> |
|||
<li>第三级无序列表</li> |
|||
<li>第三级 <a>链接</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
<section style="text-align: center; margin: 0px auto; margin-top: 2em"> |
|||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"> |
|||
<span style="font-size: 18px; color: #595959;">文本</span> |
|||
</section> |
|||
</section> |
|||
<section style="margin-top: 1.5em;"> |
|||
<p style="margin-bottom: 1em;"> |
|||
<ruby> |
|||
拼<rp>(</rp><rt>pin</rt><rp>)</rp> |
|||
音<rp>(</rp><rt>yin</rt><rp>)</rp> |
|||
</ruby> |
|||
<i>斜体</i> |
|||
<b>粗体</b> |
|||
上标<sup>1</sup> |
|||
下标<sub>2</sub> |
|||
</p> |
|||
<p style="margin-bottom: 1em;"> |
|||
<span style="text-decoration: overline;">上划线</span> |
|||
<s>中划线</s> |
|||
<u>下划线</u> |
|||
</p> |
|||
<p> |
|||
<big>大一号</big> |
|||
<span>正常</span> |
|||
<small>小一号</small> |
|||
</p> |
|||
<h2 style="margin-top: 0.5em;">大标题</h2> |
|||
<h3 style="margin-top: 0.5em;">中标题</h3> |
|||
<h4 style="margin-top: 0.5em;">小标题</h4> |
|||
</section> |
|||
<section style="text-align: center; margin: 0px auto; margin-top: 2em"> |
|||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"> |
|||
<span style="font-size: 18px; color: #595959;">链接</span> |
|||
</section> |
|||
</section> |
|||
<section style="margin-top: 1.5em; text-align: center;"> |
|||
<a href="#">跳转到顶部</a> <a href="#list">跳转到列表</a> |
|||
<div style="font-size: 12px; color: gray; margin-top: 5px;">锚点链接，将滚动到对应位置</div> |
|||
</section> |
|||
<section style="margin-top: 1.5em; text-align: center;"> |
|||
<a href="https://github.com/jin-yufeng/mp-html">外部链接</a> |
|||
<div style="font-size: 12px; color: gray; margin-top: 5px;">外部链接，将复制链接</div> |
|||
</section> |
|||
<section style="margin-top: 1.5em; text-align: center;"> |
|||
<a href="/pages/componentsB/parse/jump">内部链接</a> |
|||
<div style="font-size: 12px; color: gray; margin-top: 5px;">内部链接，将跳转页面</div> |
|||
</section> |
|||
<section style="text-align: center; margin: 0px auto; margin-top: 2em"> |
|||
<section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;"> |
|||
<span style="font-size: 18px; color: #595959;">图片</span> |
|||
</section> |
|||
</section> |
|||
<section style="margin-top: 1.5em; text-align: center;"> |
|||
<img src="/demo-thumb.jpg?sign=91b3e495d16f96a0df3d263c9ff95821&t=1609059235" original-src="/demo.jpg?sign=af7082bed28711177bd952dbab67373e&t=1609059255"> |
|||
<div style="font-size: 12px; color: gray; margin-top: 5px;">点击预览高清图</div> |
|||
</section> |
|||
<section style="margin-top: 1.5em; text-align: center;"> |
|||
<svg width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;"> |
|||
<path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> |
|||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/> |
|||
</path> |
|||
</svg> |
|||
<div style="font-size: 12px; color: gray; margin-top: 5px;">svg 动画</div> |
|||
</section> |
|||
</div>` |
|||
@ -0,0 +1,12 @@ |
|||
<template> |
|||
<view> |
|||
跳转测试页面 |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<view class="u-content"> |
|||
<u-parse container-style="padding: 20px" :content="content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" lazy-load scroll-table selectable use-anchor :tag-style="tagStyle" @load="load" @ready="ready" @imgTap="imgTap" @linkTap="linkTap" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
const content = require('./content') |
|||
export default { |
|||
data() { |
|||
return { |
|||
content: '', |
|||
tagStyle: { |
|||
table: 'box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;', |
|||
th: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;', |
|||
td: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;', |
|||
li: 'margin: 5px 0;' |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// 模拟网络请求 |
|||
setTimeout(() => { |
|||
this.content = content |
|||
}, 200) |
|||
}, |
|||
methods: { |
|||
load() { |
|||
// dom 结构加载完毕时触发 |
|||
}, |
|||
ready() { |
|||
// 渲染完毕时触发 |
|||
}, |
|||
imgTap() { |
|||
// 图片被点击时触发 |
|||
}, |
|||
linkTap() { |
|||
// 链接被点击时触发 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-content { |
|||
padding: 24rpx; |
|||
font-size: 32rpx; |
|||
color: $u-content-color; |
|||
line-height: 1.6; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress :percentage="percentage1"> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">不显示百分比</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress |
|||
:showText="false" |
|||
:percentage="percentage2" |
|||
> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义高度</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress |
|||
height="8" |
|||
:showText="false" |
|||
:percentage="percentage3" |
|||
> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress |
|||
height="8" |
|||
:showText="false" |
|||
:percentage="percentage4" |
|||
activeColor="#3c9cff" |
|||
inactiveColor="#f3f4f6" |
|||
> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<view |
|||
class="u-demo-block" |
|||
v-if="!androidNvue" |
|||
> |
|||
<text class="u-demo-block__title">自定义样式(不支持安卓环境的nvue)</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress |
|||
height="8" |
|||
:showText="false" |
|||
:percentage="percentage5" |
|||
activeColor="#3c9cff" |
|||
inactiveColor="#f3f4f6" |
|||
> |
|||
<text class="u-percentage-slot">{{percentage4}}%</text> |
|||
</u-line-progress> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">手动加减</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-line-progress |
|||
height="8" |
|||
:showText="false" |
|||
:percentage="percentage6" |
|||
activeColor="#3c9cff" |
|||
inactiveColor="#f3f4f6" |
|||
> |
|||
</u-line-progress> |
|||
<view class="button-group"> |
|||
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')"> |
|||
<text class="button-group__circle__text">减少</text> |
|||
</view> |
|||
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')"> |
|||
<text class="button-group__circle__text">增加</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
androidNvue: false, |
|||
percentage1: 30, |
|||
percentage2: 40, |
|||
percentage3: 50, |
|||
percentage4: 60, |
|||
percentage5: 70, |
|||
percentage6: 50, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
// #ifdef APP-NVUE |
|||
this.androidNvue = uni.$u.os() === 'android' |
|||
// #endif |
|||
uni.$u.sleep(2500).then(() => { |
|||
this.percentage1 = 120 |
|||
}) |
|||
}, |
|||
methods: { |
|||
computedWidth(type) { |
|||
if(type === 'plus') { |
|||
this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10) |
|||
} else { |
|||
this.percentage6 = uni.$u.range(0, 100, this.percentage6 - 10) |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page {} |
|||
|
|||
.u-percentage-slot { |
|||
padding: 1px 5px; |
|||
background-color: $u-warning; |
|||
color: #fff; |
|||
border-radius: 100px; |
|||
font-size: 10px; |
|||
margin-right: -5px; |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: column !important; |
|||
flex-wrap: nowrap; |
|||
align-items: stretch; |
|||
} |
|||
|
|||
.button-group { |
|||
@include flex; |
|||
justify-content: center; |
|||
|
|||
&__circle { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-color: #dbfbdb; |
|||
border-radius: 100px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 30px 30px; |
|||
|
|||
&__text { |
|||
color: rgb(25, 190, 107); |
|||
font-size: 13px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value1" |
|||
:show-action="false" |
|||
@change="change" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置初始值</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value2" |
|||
:show-action="false" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">搜索框形状</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value3" |
|||
:show-action="false" |
|||
shape="round" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value4" |
|||
:show-action="false" |
|||
shape="square" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">右侧控件</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search v-model="value5"></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用输入框</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
placeholder="输入框被禁用,可以监听点击事件进行跳转" |
|||
disabled |
|||
:show-action="false" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">搜索框内容水平对齐</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value6" |
|||
:show-action="false" |
|||
input-align="left" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value7" |
|||
:show-action="false" |
|||
input-align="center" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value8" |
|||
:show-action="false" |
|||
input-align="right" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value9" |
|||
:show-action="false" |
|||
borderColor="rgb(230, 230, 230)" |
|||
bgColor="#fff" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value10" |
|||
:show-action="false" |
|||
search-icon-color="#FF0000" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value11" |
|||
:show-action="false" |
|||
placeholder-color="#FF0000" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value12" |
|||
:show-action="false" |
|||
color="#FF0000" |
|||
></u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value13" |
|||
label="手机" |
|||
:show-action="false" |
|||
> |
|||
</u-search> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block__content m-t-10"> |
|||
<view class="u-page__tag-item"> |
|||
<u-search |
|||
v-model="value14" |
|||
search-icon="scan" |
|||
:show-action="false" |
|||
> |
|||
</u-search> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: '', |
|||
value2: '天山雪莲', |
|||
value3: '', |
|||
value4: '', |
|||
value5: '', |
|||
value6: '', |
|||
value7: '', |
|||
value8: '', |
|||
value9: '', |
|||
value10: '', |
|||
value11: '', |
|||
value12: '', |
|||
value13: '', |
|||
value14: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
value1(newValue, oldValue) { |
|||
// console.log('value1', newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
console.log(e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page__tag-item { |
|||
@include flex(column); |
|||
flex: 1 |
|||
} |
|||
|
|||
.m-t-10 { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基本案例</text> |
|||
<view class="u-page__slide-item"> |
|||
<u-slider |
|||
v-model="value1" |
|||
></u-slider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义范围(0—50)</text> |
|||
<view class="u-page__slide-item"> |
|||
<u-slider |
|||
v-model="value2" |
|||
showValue |
|||
min="0" |
|||
max="50" |
|||
></u-slider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">指定步长(每次步进5)</text> |
|||
<view class="u-page__slide-item"> |
|||
<u-slider |
|||
v-model="value4" |
|||
:step="5" |
|||
></u-slider> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义样式</text> |
|||
<view class="u-page__slide-item"> |
|||
<u-slider |
|||
v-model="value5" |
|||
activeColor="#deab8a" |
|||
blockColor="#f47920" |
|||
></u-slider> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: 30, |
|||
value2: 30, |
|||
value3: 30, |
|||
value4: 30, |
|||
value5: 30 |
|||
} |
|||
}, |
|||
watch: { |
|||
value1(n) { |
|||
// console.log(n); |
|||
} |
|||
}, |
|||
methods: { |
|||
moving(value) { |
|||
// console.log('moving', value) |
|||
}, |
|||
click(value) { |
|||
// console.log('click', value) |
|||
}, |
|||
end(value) { |
|||
// console.log('end', value) |
|||
}, |
|||
start(value) { |
|||
// console.log('start', value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value1" |
|||
@change="change" |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch v-model="value2"></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">加载中</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value3" |
|||
loading |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value4" |
|||
loading |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用状态</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value5" |
|||
disabled |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value6" |
|||
disabled |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义尺寸</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value7" |
|||
size="28" |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value8" |
|||
size="20" |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value9" |
|||
activeColor="#f56c6c" |
|||
loading |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value10" |
|||
activeColor="#5ac725" |
|||
loading |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
:space="2" |
|||
v-model="value11" |
|||
activeColor="#f56c6c" |
|||
inactiveColor="rgb(230, 230, 230)" |
|||
></u-switch> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
space="2" |
|||
v-model="value12" |
|||
activeColor="#f9ae3d" |
|||
inactiveColor="rgb(230, 230, 230)" |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">异步控制</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-switch |
|||
v-model="value13" |
|||
asyncChange |
|||
@change="asyncChange" |
|||
></u-switch> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: false, |
|||
value2: true, |
|||
value3: false, |
|||
value4: true, |
|||
value5: false, |
|||
value6: true, |
|||
value7: false, |
|||
value8: true, |
|||
value9: true, |
|||
value10: true, |
|||
value11: false, |
|||
value12: true, |
|||
value13: true, |
|||
} |
|||
}, |
|||
watch: { |
|||
value1(newValue, oldValue) { |
|||
console.log('v-model', newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
console.log('change', e); |
|||
}, |
|||
asyncChange(e) { |
|||
uni.showModal({ |
|||
content: e ? '确定要打开吗' : '确定要关闭吗', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
this.value13 = e |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__tag-item { |
|||
margin-right: 30px; |
|||
} |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">基础功能</text> |
|||
<u-tabbar |
|||
:value="value1" |
|||
@change="change1" |
|||
:fixed="false" |
|||
:placeholder="false" |
|||
:safeAreaInsetBottom="false" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
@click="click1" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
@click="click1" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
@click="click1" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
@click="click1" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">显示徽标</text> |
|||
<u-tabbar |
|||
:value="value2" |
|||
:placeholder="false" |
|||
@change="name => value2 = name" |
|||
:fixed="false" |
|||
:safeAreaInsetBottom="false" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
dot |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
badge="3" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">匹配标签的名称</text> |
|||
<u-tabbar |
|||
:placeholder="false" |
|||
:value="value3" |
|||
@change="name => value3 = name" |
|||
:fixed="false" |
|||
:safeAreaInsetBottom="false" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
name="home" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
name="photo" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
name="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
name="account" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义图标/颜色</text> |
|||
<u-tabbar |
|||
:value="value4" |
|||
@change="name => value4 = name" |
|||
:fixed="false" |
|||
:placeholder="false" |
|||
activeColor="#d81e06" |
|||
:safeAreaInsetBottom="false" |
|||
> |
|||
<u-tabbar-item text="首页"> |
|||
<image |
|||
class="u-page__item__slot-icon" |
|||
slot="active-icon" |
|||
src="https://cdn.uviewui.com/uview/common/bell-selected.png" |
|||
></image> |
|||
<image |
|||
class="u-page__item__slot-icon" |
|||
slot="inactive-icon" |
|||
src="https://cdn.uviewui.com/uview/common/bell.png" |
|||
></image> |
|||
</u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text> |
|||
<u-tabbar |
|||
:value="value5" |
|||
:fixed="false" |
|||
@change="change5" |
|||
:safeAreaInsetBottom="false" |
|||
:placeholder="false" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
> |
|||
</u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">去除上边框</text> |
|||
<u-tabbar |
|||
:value="value7" |
|||
:placeholder="false" |
|||
:border="false" |
|||
@change="name => value7 = name" |
|||
:fixed="false" |
|||
:safeAreaInsetBottom="false" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text> |
|||
<u-gap height="150"></u-gap> |
|||
<u-tabbar |
|||
:value="value6" |
|||
@change="name => value6 = name" |
|||
:fixed="true" |
|||
:placeholder="true" |
|||
:safeAreaInsetBottom="true" |
|||
> |
|||
<u-tabbar-item |
|||
text="首页" |
|||
icon="home" |
|||
> |
|||
</u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="放映厅" |
|||
icon="photo" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="直播" |
|||
icon="play-right" |
|||
></u-tabbar-item> |
|||
<u-tabbar-item |
|||
text="我的" |
|||
icon="account" |
|||
></u-tabbar-item> |
|||
</u-tabbar> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: 0, |
|||
value2: 1, |
|||
value3: 'play-right', |
|||
value4: 0, |
|||
value5: 0, |
|||
value6: 0, |
|||
value7: 3 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
change5(name) { |
|||
if (name === 1) return uni.$u.toast('请您先登录') |
|||
else this.value5 = name |
|||
}, |
|||
change1(e) { |
|||
this.value1 = e |
|||
console.log('change1', e); |
|||
}, |
|||
click1(e) { |
|||
console.log('click1', e); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
|
|||
&__item { |
|||
|
|||
&__title { |
|||
color: $u-tips-color; |
|||
background-color: $u-bg-color; |
|||
padding: 15px; |
|||
font-size: 15px; |
|||
|
|||
&__slot-title { |
|||
color: $u-primary; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
&__slot-icon { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,335 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
size="mini" |
|||
type="warning" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义主题</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag text="标签"> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="error" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">圆形标签</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
shape="circle" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
shape="circle" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">镂空标签</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
plain |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
plain |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="error" |
|||
plain |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">镂空带背景色</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
plainFill |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
plain |
|||
plainFill |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
plain |
|||
plainFill |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="error" |
|||
plain |
|||
plainFill |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义尺寸</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
plain |
|||
size="mini" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
plain |
|||
size="large" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可关闭标签</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
size="mini" |
|||
closable |
|||
:show="close1" |
|||
@close="close1 = false" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
closable |
|||
:show="close2" |
|||
@close="close2 = false" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
plain |
|||
size="large" |
|||
closable |
|||
:show="close3" |
|||
@close="close3 = false" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">带图片和图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
size="mini" |
|||
icon="map" |
|||
plain |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="warning" |
|||
icon="tags-fill" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
<view class="u-page__tag-item"> |
|||
<u-tag |
|||
text="标签" |
|||
type="success" |
|||
plain |
|||
size="large" |
|||
icon="https://cdn.uviewui.com/uview/example/tag.png" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">单选标签</text> |
|||
<view class="u-demo-block__content"> |
|||
<view |
|||
class="u-page__tag-item" |
|||
v-for="(item, index) in radios" |
|||
:key="index" |
|||
> |
|||
<u-tag |
|||
:text="`选项${index + 1}`" |
|||
:plain="!item.checked" |
|||
type="warning" |
|||
:name="index" |
|||
@click="radioClick" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">多选标签</text> |
|||
<view class="u-demo-block__content"> |
|||
<view |
|||
class="u-page__tag-item" |
|||
v-for="(item, index) in checkboxs" |
|||
:key="index" |
|||
> |
|||
<u-tag |
|||
:text="`选项${index + 1}`" |
|||
:plain="!item.checked" |
|||
type="warning" |
|||
:name="index" |
|||
@click="checkboxClick" |
|||
> |
|||
</u-tag> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
close1: true, |
|||
close2: true, |
|||
close3: true, |
|||
radios: [{ |
|||
checked: true |
|||
}, |
|||
{ |
|||
checked: false |
|||
}, |
|||
{ |
|||
checked: false |
|||
} |
|||
], |
|||
checkboxs: [{ |
|||
checked: true |
|||
}, |
|||
{ |
|||
checked: false |
|||
}, |
|||
{ |
|||
checked: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
radioClick(name) { |
|||
this.radios.map((item, index) => { |
|||
item.checked = index === name ? true : false |
|||
}) |
|||
}, |
|||
checkboxClick(name) { |
|||
this.checkboxs[name].checked = !this.checkboxs[name].checked |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page__tag-item { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-gap |
|||
height="30" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<u-toast ref="uToast"></u-toast> |
|||
<u-cell-group title-bg-color="rgb(243, 244, 246)"> |
|||
<u-cell |
|||
:titleStyle="{fontWeight: 500}" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
:icon="item.iconUrl" |
|||
@click="showToast(item)" |
|||
> |
|||
<!-- <image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="getIcon(item.icon)" |
|||
mode="widthFix" |
|||
></image> --> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
list: [{ |
|||
type: 'default', |
|||
title: '默认主题', |
|||
message: "锦瑟无端五十弦", |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png' |
|||
}, |
|||
{ |
|||
type: 'error', |
|||
icon: false, |
|||
title: '失败主题', |
|||
message: "一弦一柱思华年", |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
title: '成功主题(带图标)', |
|||
message: "庄生晓梦迷蝴蝶", |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png' |
|||
}, |
|||
{ |
|||
type: 'warning', |
|||
position: "top", |
|||
title: '位置偏移上方', |
|||
message: "望帝春心托杜鹃", |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png' |
|||
}, |
|||
{ |
|||
type: 'loading', |
|||
title: '正在加载', |
|||
message: "正在加载", |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png' |
|||
}, |
|||
{ |
|||
type: 'default', |
|||
title: '结束后跳转标签页', |
|||
message: "此情可待成追忆", |
|||
url: '/pages/componentsB/tag/tag', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png' |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
computed: { |
|||
getIcon() { |
|||
return path => { |
|||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png'; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
showToast(params) { |
|||
this.$refs.uToast.show({ |
|||
...params, |
|||
complete() { |
|||
params.url && uni.navigateTo({ |
|||
url: params.url |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
|
|||
.u-cell-icon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.u-cell-group__title__text { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础用法</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList1" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="1" |
|||
multiple |
|||
:maxCount="10" |
|||
></u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">上传视频</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList2" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="2" |
|||
multiple |
|||
:maxCount="10" |
|||
accept="video" |
|||
></u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">文件预览</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList3" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="3" |
|||
multiple |
|||
:maxCount="10" |
|||
:previewFullImage="true" |
|||
></u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">隐藏上传按钮</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList4" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="4" |
|||
multiple |
|||
:maxCount="2" |
|||
></u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">限制上传数量</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList5" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="5" |
|||
multiple |
|||
:maxCount="3" |
|||
></u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义上传样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__upload-item"> |
|||
<u-upload |
|||
:fileList="fileList6" |
|||
@afterRead="afterRead" |
|||
@delete="deletePic" |
|||
name="6" |
|||
multiple |
|||
:maxCount="1" |
|||
width="250" |
|||
height="150" |
|||
> |
|||
<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image> |
|||
</u-upload> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
fileList1: [], |
|||
fileList2: [], |
|||
fileList3: [{ |
|||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
}], |
|||
fileList4: [{ |
|||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
}, |
|||
{ |
|||
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
|||
} |
|||
], |
|||
fileList5: [], |
|||
fileList6: [], |
|||
fileList7: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
// 删除图片 |
|||
deletePic(event) { |
|||
this[`fileList${event.name}`].splice(event.index, 1) |
|||
}, |
|||
// 新增图片 |
|||
async afterRead(event) { |
|||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 |
|||
let lists = [].concat(event.file) |
|||
let fileListLen = this[`fileList${event.name}`].length |
|||
lists.map((item) => { |
|||
this[`fileList${event.name}`].push({ |
|||
...item, |
|||
status: 'uploading', |
|||
message: '上传中' |
|||
}) |
|||
}) |
|||
for (let i = 0; i < lists.length; i++) { |
|||
const result = await this.uploadFilePromise(lists[i].thumb) |
|||
let item = this[`fileList${event.name}`][fileListLen] |
|||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { |
|||
status: 'success', |
|||
message: '', |
|||
url: result |
|||
})) |
|||
fileListLen++ |
|||
} |
|||
}, |
|||
uploadFilePromise(url) { |
|||
return new Promise((resolve, reject) => { |
|||
let a = uni.uploadFile({ |
|||
url: '', // 仅为示例，非真实的接口地址 |
|||
filePath: url, |
|||
name: 'file', |
|||
formData: { |
|||
user: 'test' |
|||
}, |
|||
success: (res) => { |
|||
setTimeout(() => { |
|||
resolve(res.data.data) |
|||
}, 1000) |
|||
} |
|||
}); |
|||
}) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
&__upload-item{ |
|||
margin-top:5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,218 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="album"> |
|||
<view class="album__avatar"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
mode="" |
|||
style="width: 32px;height: 32px;" |
|||
></image> |
|||
</view> |
|||
<view class="album__content"> |
|||
<u--text |
|||
text="uView UI" |
|||
type="primary" |
|||
bold |
|||
size="17" |
|||
></u--text> |
|||
<u--text |
|||
margin="0 0 8px 0" |
|||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" |
|||
></u--text> |
|||
<u-album |
|||
:urls="urls1" |
|||
keyName="src2" |
|||
></u-album> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">多图模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="album"> |
|||
<view class="album__avatar"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
mode="" |
|||
style="width: 32px;height: 32px;" |
|||
></image> |
|||
</view> |
|||
<view class="album__content"> |
|||
<u--text |
|||
text="uView UI" |
|||
type="primary" |
|||
bold |
|||
size="17" |
|||
></u--text> |
|||
<u--text |
|||
margin="0 0 8px 0" |
|||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" |
|||
></u--text> |
|||
<u-album :urls="urls2"></u-album> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">图文对齐</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="album"> |
|||
<view class="album__avatar"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
mode="" |
|||
style="width: 32px;height: 32px;" |
|||
></image> |
|||
</view> |
|||
<view class="album__content"> |
|||
<u--text |
|||
text="uView UI" |
|||
type="primary" |
|||
bold |
|||
size="17" |
|||
></u--text> |
|||
<view :style="{ |
|||
marginBottom: '8px', |
|||
width: albumWidth + 'px' |
|||
}"> |
|||
<u--text |
|||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" |
|||
:customStyle="{ |
|||
width: albumWidth + 'px' |
|||
}" |
|||
></u--text> |
|||
</view> |
|||
<u-album |
|||
:urls="urls2" |
|||
@albumWidth="width => albumWidth = width" |
|||
multipleSize="68" |
|||
></u-album> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">更改裁剪模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="album"> |
|||
<view class="album__avatar"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
mode="" |
|||
style="width: 32px;height: 32px;" |
|||
></image> |
|||
</view> |
|||
<view class="album__content"> |
|||
<u--text |
|||
text="uView UI" |
|||
type="primary" |
|||
bold |
|||
size="17" |
|||
></u--text> |
|||
<u--text |
|||
margin="0 0 8px 0" |
|||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" |
|||
></u--text> |
|||
<u-album |
|||
:urls="urls3" |
|||
rowCount="2" |
|||
maxCount="4" |
|||
multipleMode="scaleToFill" |
|||
></u-album> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">更改图片大小</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="album"> |
|||
<view class="album__avatar"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
mode="" |
|||
style="width: 32px;height: 32px;" |
|||
></image> |
|||
</view> |
|||
<view class="album__content"> |
|||
<u--text |
|||
text="uView UI" |
|||
type="primary" |
|||
bold |
|||
size="17" |
|||
></u--text> |
|||
<u--text |
|||
margin="0 0 8px 0" |
|||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水" |
|||
></u--text> |
|||
<u-album |
|||
:urls="urls4" |
|||
rowCount="2" |
|||
maxCount="4" |
|||
multipleSize="50" |
|||
></u-album> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
albumWidth: 0, |
|||
urls1: [{ |
|||
src2: 'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
}], |
|||
urls2: [ |
|||
'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
'https://cdn.uviewui.com/uview/album/2.jpg', |
|||
'https://cdn.uviewui.com/uview/album/3.jpg', |
|||
'https://cdn.uviewui.com/uview/album/4.jpg', |
|||
'https://cdn.uviewui.com/uview/album/5.jpg', |
|||
'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/8.jpg', |
|||
'https://cdn.uviewui.com/uview/album/9.jpg', |
|||
'https://cdn.uviewui.com/uview/album/10.jpg', |
|||
], |
|||
urls3: [ |
|||
'https://cdn.uviewui.com/uview/album/5.jpg', |
|||
'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/8.jpg', |
|||
], |
|||
urls4: [ |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/8.jpg', |
|||
'https://cdn.uviewui.com/uview/album/9.jpg', |
|||
'https://cdn.uviewui.com/uview/album/10.jpg', |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.album { |
|||
@include flex; |
|||
align-items: flex-start; |
|||
|
|||
&__avatar { |
|||
background-color: $u-bg-color; |
|||
padding: 5px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
&__content { |
|||
margin-left: 10px; |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础演示</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-avatar :src="src1"></u-avatar> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">头像形状</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
:src="src2" |
|||
shape="circle" |
|||
@click="click" |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
:src="src3" |
|||
shape="square" |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">头像尺寸</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
:src="src4" |
|||
size="30" |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
:src="src5" |
|||
size="40" |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
:src="src6" |
|||
size="50" |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">图标头像</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
icon="red-packet-fill" |
|||
fontSize="22" |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
icon="star-fill" |
|||
fontSize="22" |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">文字头像(自动背景色)</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
text="U" |
|||
fontSize="20" |
|||
randomBgColor |
|||
:colorIndex="0" |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
text="邓" |
|||
fontSize="18" |
|||
randomBgColor |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
text="张" |
|||
fontSize="18" |
|||
randomBgColor |
|||
></u-avatar> |
|||
</view> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
text="王" |
|||
fontSize="18" |
|||
randomBgColor |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">图片加载失败(显示默认头像)</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-avatar :src="src7"></u-avatar> |
|||
</view> |
|||
</view> |
|||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU --> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">小程序开放能力</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-avatar-item"> |
|||
<u-avatar |
|||
mpAvatar |
|||
size="60" |
|||
></u-avatar> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- #endif --> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">头像组</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-avatar-group |
|||
:urls="urls" |
|||
size="35" |
|||
gap="0.4" |
|||
></u-avatar-group> |
|||
</view> |
|||
<view class="u-demo-block__content" style="margin-top: 20px"> |
|||
<u-avatar-group |
|||
:urls="urls" |
|||
size="35" |
|||
gap="0.6" |
|||
></u-avatar-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
src1: 'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
src2: 'https://cdn.uviewui.com/uview/album/2.jpg', |
|||
src3: 'https://cdn.uviewui.com/uview/album/3.jpg', |
|||
src4: 'https://cdn.uviewui.com/uview/album/4.jpg', |
|||
src5: 'https://cdn.uviewui.com/uview/album/5.jpg', |
|||
src6: 'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
src7: 'https://cdn.uviewui.com/uview/album/noExist.jpg', |
|||
urls: [ |
|||
'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
'https://cdn.uviewui.com/uview/album/2.jpg', |
|||
'https://cdn.uviewui.com/uview/album/3.jpg', |
|||
'https://cdn.uviewui.com/uview/album/4.jpg', |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
'https://cdn.uviewui.com/uview/album/5.jpg' |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
click(name) { |
|||
console.log('click', name); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-demo-block__content { |
|||
@include flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.u-avatar-item { |
|||
margin-right: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="日历" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-cell-group> |
|||
<u-cell |
|||
@click="showCalendar(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-calendar |
|||
:show="show1" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
:maxDate="1636725054000" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show2" |
|||
mode="multiple" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show3" |
|||
mode="range" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show4" |
|||
mode="range" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
color="#f56c6c" |
|||
:defaultDate="customThemeDefaultDate" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show5" |
|||
mode="range" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
:defaultDate="customTextDefaultDate" |
|||
startText="住店" |
|||
endText="离店" |
|||
confirmDisabledText="请选择离店日期" |
|||
:formatter="formatter" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show6" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
:maxDate="maxDate" |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show7" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
showLunar |
|||
></u-calendar> |
|||
<u-calendar |
|||
:show="show8" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
mode="multiple" |
|||
:defaultDate="defaultDateMultiple" |
|||
></u-calendar> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
const d = new Date() |
|||
const year = d.getFullYear() |
|||
let month = d.getMonth() + 1 |
|||
month = month < 10 ? `0${month}` : month |
|||
const date = d.getDate() |
|||
return { |
|||
index: 0, |
|||
show1: false, |
|||
show2: false, |
|||
show3: false, |
|||
show4: false, |
|||
show5: false, |
|||
show6: false, |
|||
show7: false, |
|||
show8: false, |
|||
customThemeDefaultDate: [`${year}-${month}-${date}`, `${year}-${month}-${date + 5}`], |
|||
customTextDefaultDate: [`${year}-${month}-${date}`], |
|||
maxDate: `${year}-${month}-${date + 10}`, |
|||
defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`], |
|||
list: [{ |
|||
title: '单个日期', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png' |
|||
}, |
|||
{ |
|||
title: '多个日期', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png' |
|||
}, |
|||
{ |
|||
title: '日期范围', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png' |
|||
}, |
|||
{ |
|||
title: '自定义主题颜色', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png' |
|||
},{ |
|||
title: '自定义文案', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png' |
|||
},{ |
|||
title: '日期最大范围', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png' |
|||
},{ |
|||
title: '显示农历', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png' |
|||
},{ |
|||
title: '默认日期', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
showCalendar(index) { |
|||
this.index = index + 1 |
|||
this[`show${index + 1}`] = true |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack(); |
|||
}, |
|||
confirm(e) { |
|||
this[`show${this.index}`] = false |
|||
}, |
|||
close() { |
|||
this[`show${this.index}`] = false |
|||
}, |
|||
formatter(day) { |
|||
const d = new Date() |
|||
let month = d.getMonth() + 1 |
|||
const date = d.getDate() |
|||
if(day.month == month && day.day == date + 3) { |
|||
day.bottomInfo = '有优惠' |
|||
day.dot = true |
|||
} |
|||
return day |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value1" |
|||
:maxlength="4" |
|||
@change="change" |
|||
@finish="finish" |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">横线模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value2" |
|||
mode="line" |
|||
:maxlength="4" |
|||
:bold="true" |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置长度</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value3" |
|||
:maxlength="6" |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置间距</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value4" |
|||
mode="box" |
|||
:space="0" |
|||
:maxlength="4" |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">细边框</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value5" |
|||
mode="box" |
|||
:space="0" |
|||
:maxlength="4" |
|||
hairline |
|||
></u-code-input> |
|||
</view> |
|||
<view |
|||
class="u-demo-block__content" |
|||
style="margin-top: 10px;" |
|||
> |
|||
<u-code-input |
|||
v-model="value6" |
|||
mode="line" |
|||
:space="10" |
|||
:maxlength="4" |
|||
hairline |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">调整颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value7" |
|||
mode="box" |
|||
:space="0" |
|||
:maxlength="4" |
|||
hairline |
|||
color="#f56c6c" |
|||
borderColor="#f56c6c" |
|||
></u-code-input> |
|||
<view class="u-demo-block__content" style="margin-top: 10px;"> |
|||
<u-code-input |
|||
v-model="value10" |
|||
mode="line" |
|||
size="30" |
|||
:maxlength="4" |
|||
hairline |
|||
color="#3c9cff" |
|||
borderColor="#3c9cff" |
|||
></u-code-input> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">点模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value8" |
|||
mode="box" |
|||
dot |
|||
:space="0" |
|||
:maxlength="4" |
|||
hairline |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">预置内容</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-code-input |
|||
v-model="value9" |
|||
mode="box" |
|||
:space="0" |
|||
:maxlength="4" |
|||
hairline |
|||
fontSize="17" |
|||
></u-code-input> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: '', |
|||
value2: '', |
|||
value3: '', |
|||
value4: '', |
|||
value5: '', |
|||
value6: '', |
|||
value7: '', |
|||
value8: '', |
|||
value9: '123', |
|||
value10: '34' |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
console.log('change', e); |
|||
}, |
|||
finish(e) { |
|||
console.log('finish', e); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,233 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="datetimePicker 时间日期选择器" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-cell-group> |
|||
<u-cell |
|||
@click="showDatetimePicker(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-datetime-picker |
|||
:show="show1" |
|||
v-model="value1" |
|||
mode="datetime" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show2" |
|||
v-model="value2" |
|||
mode="date" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show3" |
|||
v-model="value3" |
|||
mode="year-month" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show4" |
|||
v-model="value4" |
|||
mode="time" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show5" |
|||
v-model="value5" |
|||
:filter="filter" |
|||
mode="date" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show6" |
|||
v-model="value6" |
|||
mode="date" |
|||
:formatter="formatter" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
<u-datetime-picker |
|||
:show="show7" |
|||
v-model="value7" |
|||
mode="datetime" |
|||
:minDate="1587524800000" |
|||
:maxDate="1786778555000" |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@change="change" |
|||
@close="close" |
|||
></u-datetime-picker> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
const d = new Date() |
|||
const year = d.getFullYear() |
|||
let month = uni.$u.padZero(d.getMonth() + 1) |
|||
const date = d.getDate() |
|||
return { |
|||
current: 0, |
|||
value1: Number(new Date()), |
|||
value2: Number(new Date()), |
|||
value3: Number(new Date()), |
|||
value4: '05:28', |
|||
value5: Number(new Date()), |
|||
value6: Number(new Date()), |
|||
value7: Number(new Date()), |
|||
show1: false, |
|||
show2: false, |
|||
show3: false, |
|||
show4: false, |
|||
show5: false, |
|||
show6: false, |
|||
show7: false, |
|||
list: [{ |
|||
title: '完整日期时间', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png' |
|||
}, |
|||
{ |
|||
title: '年月日', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png' |
|||
}, |
|||
{ |
|||
title: '年月', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png' |
|||
}, |
|||
{ |
|||
title: '时间', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png' |
|||
}, { |
|||
title: '过滤器(保留偶数年)', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png' |
|||
}, { |
|||
title: '格式化', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png' |
|||
}, { |
|||
title: '限制最大最小值', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
close() { |
|||
this[`show${this.current}`] = false |
|||
}, |
|||
cancel() { |
|||
this[`show${this.current}`] = false |
|||
}, |
|||
confirm(e) { |
|||
this[`show${this.current}`] = false |
|||
this.result(e.value, e.mode) |
|||
}, |
|||
change(e) { |
|||
// console.log('change', e) |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
formatter(mode, value) { |
|||
if (mode === 'year') { |
|||
return `${value}年`; |
|||
} |
|||
if (mode === 'month') { |
|||
return `${value}月`; |
|||
} |
|||
return value; |
|||
}, |
|||
filter(mode, options) { |
|||
if (mode === 'year') { |
|||
return options.filter((option) => option % 2 === 0); |
|||
} |
|||
|
|||
return options; |
|||
}, |
|||
showDatetimePicker(index) { |
|||
this.current = index + 1 |
|||
this[`show${index + 1}`] = true |
|||
}, |
|||
result(time, mode) { |
|||
const timeFormat = uni.$u.timeFormat, |
|||
toast = uni.$u.toast |
|||
switch (mode) { |
|||
case 'datetime': |
|||
return toast(timeFormat(time, 'yyyy-mm-dd hh:MM')) |
|||
case 'date': |
|||
return toast(timeFormat(time, 'yyyy-mm-dd')) |
|||
case 'year-month': |
|||
return toast(timeFormat(time, 'yyyy-mm')) |
|||
case 'time': |
|||
return toast(time) |
|||
default: |
|||
return '' |
|||
} |
|||
}, |
|||
filter(type, options) { |
|||
if (type === 'year') { |
|||
return options.filter((option) => option % 2 === 0) |
|||
} |
|||
|
|||
return options; |
|||
}, |
|||
formatter(type, value) { |
|||
if (type === 'year') { |
|||
return `${value}年` |
|||
} |
|||
if (type === 'month') { |
|||
return `${value}月` |
|||
} |
|||
if (type === 'day') { |
|||
return `${value}日` |
|||
} |
|||
return value |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,425 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="表单" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 --> |
|||
<u--form |
|||
labelPosition="left" |
|||
:model="model1" |
|||
ref="form1" |
|||
> |
|||
<u-form-item |
|||
label="姓名" |
|||
prop="userInfo.name" |
|||
borderBottom |
|||
ref="item1" |
|||
> |
|||
<u--input |
|||
v-model="model1.userInfo.name" |
|||
border="none" |
|||
placeholder="姓名,只能为中文" |
|||
></u--input> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="性别" |
|||
prop="userInfo.sex" |
|||
borderBottom |
|||
@click="showSex = true; hideKeyboard()" |
|||
ref="item1" |
|||
> |
|||
<u--input |
|||
v-model="model1.userInfo.sex" |
|||
disabled |
|||
disabledColor="#ffffff" |
|||
placeholder="请选择性别" |
|||
border="none" |
|||
></u--input> |
|||
<u-icon |
|||
slot="right" |
|||
name="arrow-right" |
|||
></u-icon> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="水果" |
|||
prop="radiovalue1" |
|||
borderBottom |
|||
ref="item2" |
|||
> |
|||
<u-radio-group v-model="model1.radiovalue1"> |
|||
<u-radio |
|||
:customStyle="{marginRight: '16px'}" |
|||
v-for="(item, index) in radiolist1" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="兴趣爱好" |
|||
prop="checkboxValue1" |
|||
borderBottom |
|||
labelWidth="80" |
|||
ref="item3" |
|||
> |
|||
<u-checkbox-group |
|||
v-model="model1.checkboxValue1" |
|||
shape="square" |
|||
@change="change" |
|||
> |
|||
<u-checkbox |
|||
:customStyle="{marginRight: '16px'}" |
|||
v-for="(item, index) in checkboxList1" |
|||
:key="index" |
|||
:label="item.name" |
|||
:name="item.name" |
|||
> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="简介" |
|||
prop="intro" |
|||
borderBottom |
|||
ref="item3" |
|||
> |
|||
<u--textarea |
|||
placeholder="不低于3个字" |
|||
v-model="model1.intro" |
|||
count |
|||
></u--textarea> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="住店时间" |
|||
prop="hotel" |
|||
labelWidth="80" |
|||
borderBottom |
|||
@click="showCalendar = true; hideKeyboard()" |
|||
> |
|||
<u--input |
|||
v-model="model1.hotel" |
|||
disabled |
|||
disabledColor="#ffffff" |
|||
placeholder="请选择住店和离店时间" |
|||
border="none" |
|||
></u--input> |
|||
<u-icon |
|||
slot="right" |
|||
name="arrow-right" |
|||
></u-icon> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="验证码" |
|||
prop="code" |
|||
labelWidth="80" |
|||
borderBottom |
|||
> |
|||
<u--input |
|||
v-model="model1.code" |
|||
border="none" |
|||
placeholder="请填写验证码" |
|||
></u--input> |
|||
<u-button |
|||
slot="right" |
|||
@tap="getCode" |
|||
:text="tips" |
|||
type="success" |
|||
size="mini" |
|||
:disabled="disabled1" |
|||
></u-button> |
|||
</u-form-item> |
|||
<u-form-item |
|||
label="生日" |
|||
prop="userInfo.birthday" |
|||
borderBottom |
|||
@click="showBirthday = true; hideKeyboard()" |
|||
ref="item1" |
|||
> |
|||
<u--input |
|||
v-model="model1.userInfo.birthday" |
|||
disabled |
|||
disabledColor="#ffffff" |
|||
placeholder="请选择生日" |
|||
border="none" |
|||
></u--input> |
|||
<u-icon |
|||
slot="right" |
|||
name="arrow-right" |
|||
></u-icon> |
|||
</u-form-item> |
|||
</u--form> |
|||
<u-button |
|||
type="primary" |
|||
text="提交" |
|||
customStyle="margin-top: 50px" |
|||
@click="submit" |
|||
></u-button> |
|||
<u-action-sheet |
|||
:show="showSex" |
|||
:actions="actions" |
|||
title="请选择性别" |
|||
description="如果选择保密会报错" |
|||
@close="showSex = false" |
|||
@select="sexSelect" |
|||
> |
|||
</u-action-sheet> |
|||
<u-calendar |
|||
:show="showCalendar" |
|||
mode="range" |
|||
@confirm="calendarConfirm" |
|||
@close="calendarClose" |
|||
startText="住店" |
|||
endText="离店" |
|||
confirmDisabledText="请选择离店日期" |
|||
:formatter="formatter" |
|||
></u-calendar> |
|||
<u-code |
|||
ref="uCode" |
|||
@change="codeChange" |
|||
seconds="20" |
|||
@start="disabled1 = true" |
|||
@end="disabled1 = false" |
|||
></u-code> |
|||
<u-datetime-picker |
|||
:show="showBirthday" |
|||
:value="birthday" |
|||
mode="date" |
|||
closeOnClickOverlay |
|||
@confirm="birthdayConfirm" |
|||
@cancel="birthdayClose" |
|||
@close="birthdayClose" |
|||
></u-datetime-picker> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
fileList1: [], |
|||
disabled1: false, |
|||
tips: '', |
|||
value: '', |
|||
showCalendar: false, |
|||
showBirthday: false, |
|||
model1: { |
|||
userInfo: { |
|||
name: '楼兰', |
|||
sex: '', |
|||
birthday: '' |
|||
}, |
|||
radiovalue1: '苹果', |
|||
checkboxValue1: [], |
|||
intro: '', |
|||
code: '' |
|||
}, |
|||
showSex: false, |
|||
birthday: Number(new Date()), |
|||
actions: [{ |
|||
name: '男', |
|||
}, |
|||
{ |
|||
name: '女', |
|||
}, |
|||
{ |
|||
name: '保密', |
|||
}, |
|||
], |
|||
rules: { |
|||
'userInfo.name': [{ |
|||
type: 'string', |
|||
required: true, |
|||
message: '请填写姓名', |
|||
trigger: ['blur', 'change'] |
|||
}, { |
|||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明 |
|||
validator: (rule, value, callback) => { |
|||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html |
|||
return uni.$u.test.chinese(value); |
|||
}, |
|||
message: "姓名必须为中文", |
|||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开 |
|||
trigger: ["change", "blur"], |
|||
}], |
|||
code: { |
|||
type: 'string', |
|||
required: true, |
|||
len: 4, |
|||
message: '请填写4位验证码', |
|||
trigger: ['blur'] |
|||
}, |
|||
'userInfo.sex': { |
|||
type: 'string', |
|||
max: 1, |
|||
required: true, |
|||
message: '请选择男或女', |
|||
trigger: ['blur', 'change'] |
|||
}, |
|||
radiovalue1: { |
|||
type: 'string', |
|||
min: 1, |
|||
max: 2, |
|||
message: '橙子有毒', |
|||
trigger: ['change'] |
|||
}, |
|||
checkboxValue1: { |
|||
type: 'array', |
|||
min: 2, |
|||
required: true, |
|||
message: '不能太宅，至少选两项', |
|||
trigger: ['change'] |
|||
}, |
|||
intro: { |
|||
type: 'string', |
|||
min: 3, |
|||
required: true, |
|||
message: '不低于3个字', |
|||
trigger: ['change'] |
|||
}, |
|||
hotel: { |
|||
type: 'string', |
|||
min: 2, |
|||
required: true, |
|||
message: '请选择住店时间', |
|||
trigger: ['change'] |
|||
}, |
|||
'userInfo.birthday': { |
|||
type: 'string', |
|||
required: true, |
|||
message: '请选择生日', |
|||
trigger: ['change'] |
|||
}, |
|||
}, |
|||
radiolist1: [{ |
|||
name: '苹果', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '香蕉', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '毒橙子', |
|||
disabled: false |
|||
} |
|||
], |
|||
checkboxList1: [{ |
|||
name: '羽毛球', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '跑步', |
|||
disabled: false |
|||
}, |
|||
{ |
|||
name: '爬山', |
|||
disabled: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onReady() { |
|||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 |
|||
this.$refs.form1.setRules(this.rules) |
|||
}, |
|||
methods: { |
|||
afterRead(event) { |
|||
this.fileList1.push({ |
|||
url: event.file, |
|||
status: 'uploading', |
|||
message: '上传中' |
|||
}) |
|||
}, |
|||
groupChange(n) { |
|||
// console.log('groupChange', n); |
|||
}, |
|||
radioChange(n) { |
|||
// console.log('radioChange', n); |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
sexSelect(e) { |
|||
this.model1.userInfo.sex = e.name |
|||
this.$refs.form1.validateField('userInfo.sex') |
|||
}, |
|||
change(e) { |
|||
// console.log(e); |
|||
}, |
|||
formatter(day) { |
|||
const d = new Date() |
|||
let month = d.getMonth() + 1 |
|||
const date = d.getDate() |
|||
if (day.month == month && day.day == date + 3) { |
|||
day.bottomInfo = '有优惠' |
|||
day.dot = true |
|||
} |
|||
return day |
|||
}, |
|||
calendarConfirm(e) { |
|||
this.showCalendar = false |
|||
this.model1.hotel = `${e[0]} / ${e[e.length - 1]}` |
|||
this.$refs.form1.validateField('hotel') |
|||
}, |
|||
codeChange(text) { |
|||
this.tips = text; |
|||
}, |
|||
getCode() { |
|||
if (this.$refs.uCode.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
uni.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode.start(); |
|||
}, 2000); |
|||
} else { |
|||
uni.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
calendarClose() { |
|||
this.showCalendar = false |
|||
this.$refs.form1.validateField('hotel') |
|||
}, |
|||
birthdayClose() { |
|||
this.showBirthday = false |
|||
this.$refs.form1.validateField('userInfo.birthday') |
|||
}, |
|||
birthdayConfirm(e) { |
|||
this.showBirthday = false |
|||
this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') |
|||
this.$refs.form1.validateField('userInfo.birthday') |
|||
}, |
|||
submit() { |
|||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true |
|||
this.$refs.form1.validate().then(res => { |
|||
uni.$u.toast('校验通过') |
|||
}).catch(errors => { |
|||
uni.$u.toast('校验失败') |
|||
}) |
|||
}, |
|||
hideKeyboard() { |
|||
uni.hideKeyboard() |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<u-index-list :indexList="indexList"> |
|||
<view slot="header" class="list"> |
|||
<view class="list__item"> |
|||
<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar> |
|||
<text class="list__item__user-name">新的朋友</text> |
|||
</view> |
|||
<u-line></u-line> |
|||
<view class="list__item"> |
|||
<u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar> |
|||
<text class="list__item__user-name">标签</text> |
|||
</view> |
|||
<u-line></u-line> |
|||
<view class="list__item"> |
|||
<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> |
|||
<text class="list__item__user-name">朋友圈</text> |
|||
</view> |
|||
<u-line></u-line> |
|||
<view class="list__item"> |
|||
<u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar> |
|||
<text class="list__item__user-name">QQ</text> |
|||
</view> |
|||
<u-line></u-line> |
|||
</view> |
|||
<template v-for="(item, index) in itemArr"> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor> |
|||
<!-- #endif --> |
|||
<u-index-item :key="index"> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<u-index-anchor :text="indexList[index]"></u-index-anchor> |
|||
<!-- #endif --> |
|||
<view class="list" v-for="(item1, index1) in item" :key="index1"> |
|||
<view class="list__item"> |
|||
<image class="list__item__avatar" :src="item1.url"></image> |
|||
<text class="list__item__user-name">{{item1.name}}</text> |
|||
</view> |
|||
<u-line></u-line> |
|||
</view> |
|||
</u-index-item> |
|||
</template> |
|||
<view slot="footer" class="u-safe-area-inset--bottom"> |
|||
<text class="list__footer">共305位好友</text> |
|||
</view> |
|||
</u-index-list> |
|||
</template> |
|||
|
|||
<script> |
|||
const indexList = () => { |
|||
const indexList = [] |
|||
const charCodeOfA = 'A'.charCodeAt(0) |
|||
indexList.push("↑") |
|||
indexList.push("☆") |
|||
for (let i = 0; i < 26; i++) { |
|||
indexList.push(String.fromCharCode(charCodeOfA + i)) |
|||
} |
|||
indexList.push('#') |
|||
return indexList |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
indexList: indexList(), |
|||
urls: [ |
|||
'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
'https://cdn.uviewui.com/uview/album/2.jpg', |
|||
'https://cdn.uviewui.com/uview/album/3.jpg', |
|||
'https://cdn.uviewui.com/uview/album/4.jpg', |
|||
'https://cdn.uviewui.com/uview/album/5.jpg', |
|||
'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/8.jpg', |
|||
'https://cdn.uviewui.com/uview/album/9.jpg', |
|||
'https://cdn.uviewui.com/uview/album/10.jpg', |
|||
], |
|||
names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使", |
|||
"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超" |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
itemArr() { |
|||
return this.indexList.map(item => { |
|||
const arr = [] |
|||
for (let i = 0; i < 10; i++) { |
|||
arr.push({ |
|||
name: this.names[uni.$u.random(0, this.names.length - 1)], |
|||
url: this.urls[uni.$u.random(0, this.urls.length - 1)] |
|||
}) |
|||
} |
|||
return arr |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.list { |
|||
|
|||
&__item { |
|||
@include flex; |
|||
padding: 6px 12px; |
|||
align-items: center; |
|||
|
|||
&__avatar { |
|||
height: 35px; |
|||
width: 35px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
&__user-name { |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
color: $u-main-color; |
|||
} |
|||
} |
|||
|
|||
&__footer { |
|||
color: $u-tips-color; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
margin: 15px 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="请输入内容" |
|||
border="surround" |
|||
v-model="value" |
|||
@change="change" |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">可清空内容</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="请输入内容" |
|||
border="surround" |
|||
clearable |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示下划线</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="请输入内容" |
|||
border="bottom" |
|||
clearable |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用状态</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="禁用状态" |
|||
border="surround" |
|||
disabled |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">圆形</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="请输入内容" |
|||
border="surround" |
|||
shape="circle" |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">前后图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--input |
|||
placeholder="前置图标" |
|||
prefixIcon="search" |
|||
prefixIconStyle="font-size: 22px;color: #909399" |
|||
></u--input> |
|||
</view> |
|||
<view |
|||
class="u-demo-block__content" |
|||
style="margin-top: 15px;" |
|||
> |
|||
<u--input |
|||
placeholder="后置图标" |
|||
suffixIcon="map-fill" |
|||
suffixIconStyle="color: #909399" |
|||
></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">前后插槽</text> |
|||
<view class="u-demo-block__content"> |
|||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input --> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<u-input placeholder="前置插槽"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<u--input placeholder="前置插槽"> |
|||
<!-- #endif --> |
|||
<u--text |
|||
text="http://" |
|||
slot="prefix" |
|||
margin="0 3px 0 0" |
|||
type="tips" |
|||
></u--text> |
|||
<!-- #ifndef APP-NVUE --> |
|||
</u-input> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-NVUE --> |
|||
</u--input> |
|||
<!-- #endif --> |
|||
</view> |
|||
<view |
|||
class="u-demo-block__content" |
|||
style="margin-top: 15px;" |
|||
> |
|||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input --> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<u-input placeholder="后置插槽"> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<u--input placeholder="后置插槽"> |
|||
<!-- #endif --> |
|||
<template slot="suffix"> |
|||
<u-code |
|||
ref="uCode" |
|||
@change="codeChange" |
|||
seconds="20" |
|||
changeText="X秒重新获取哈哈哈" |
|||
></u-code> |
|||
<u-button |
|||
@tap="getCode" |
|||
:text="tips" |
|||
type="success" |
|||
size="mini" |
|||
></u-button> |
|||
</template> |
|||
<!-- #ifndef APP-NVUE --> |
|||
</u-input> |
|||
<!-- #endif --> |
|||
<!-- #ifdef APP-NVUE --> |
|||
</u--input> |
|||
<!-- #endif --> |
|||
</view> |
|||
</view> |
|||
<u-gap |
|||
bgColor="#fff" |
|||
height="50" |
|||
></u-gap> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tips: '', |
|||
value: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
value(newValue, oldValue) { |
|||
// console.log('v-model', newValue); |
|||
} |
|||
}, |
|||
methods: { |
|||
codeChange(text) { |
|||
this.tips = text; |
|||
}, |
|||
getCode() { |
|||
if (this.$refs.uCode.canGetCode) { |
|||
// 模拟向后端请求验证码 |
|||
uni.showLoading({ |
|||
title: '正在获取验证码' |
|||
}) |
|||
setTimeout(() => { |
|||
uni.hideLoading(); |
|||
// 这里此提示会被this.start()方法中的提示覆盖 |
|||
uni.$u.toast('验证码已发送'); |
|||
// 通知验证码组件内部开始倒计时 |
|||
this.$refs.uCode.start(); |
|||
}, 2000); |
|||
} else { |
|||
uni.$u.toast('倒计时结束后再发送'); |
|||
} |
|||
}, |
|||
change(e) { |
|||
console.log('change', e); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,156 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-row customStyle="margin-bottom: 10px"> |
|||
<u-col span="6"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="6"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
</u-row> |
|||
<u-row customStyle="margin-bottom: 10px"> |
|||
<u-col span="4"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="4"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="4"> |
|||
<view class="demo-layout bg-purple-dark"></view> |
|||
</u-col> |
|||
</u-row> |
|||
<u-row justify="space-between"> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">分栏间隔</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-row justify="space-between" gutter="10"> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">混合布局</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-row justify="space-between" gutter="10"> |
|||
<u-col span="2"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="4"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
<u-col span="6"> |
|||
<view class="demo-layout bg-purple-dark"></view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">分栏偏移</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-row |
|||
justify="space-between" |
|||
customStyle="margin-bottom: 10px" |
|||
> |
|||
<u-col span="3" offset="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3" offset="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
</u-row> |
|||
<u-row> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3" offset="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">对齐方式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-row |
|||
justify="space-between" |
|||
customStyle="margin-bottom: 10px" |
|||
> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
</u-row> |
|||
<u-row> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple-light"></view> |
|||
</u-col> |
|||
<u-col span="3"> |
|||
<view class="demo-layout bg-purple"></view> |
|||
</u-col> |
|||
</u-row> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.wrap { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.demo-layout { |
|||
height: 25px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.bg-purple { |
|||
background: #ced7e1; |
|||
} |
|||
|
|||
.bg-purple-light { |
|||
background: #e5e9f2; |
|||
} |
|||
|
|||
.bg-purple-dark { |
|||
background: #99a9bf; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-list |
|||
@scrolltolower="scrolltolower" |
|||
> |
|||
<u-list-item |
|||
v-for="(item, index) in indexList" |
|||
:key="index" |
|||
> |
|||
<u-cell |
|||
:title="`列表长度-${index + 1}`" |
|||
> |
|||
<u-avatar |
|||
slot="icon" |
|||
shape="square" |
|||
size="35" |
|||
:src="item.url" |
|||
customStyle="margin: -3px 5px -3px 0" |
|||
></u-avatar> |
|||
</u-cell> |
|||
</u-list-item> |
|||
</u-list> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
indexList: [], |
|||
urls: [ |
|||
'https://cdn.uviewui.com/uview/album/1.jpg', |
|||
'https://cdn.uviewui.com/uview/album/2.jpg', |
|||
'https://cdn.uviewui.com/uview/album/3.jpg', |
|||
'https://cdn.uviewui.com/uview/album/4.jpg', |
|||
'https://cdn.uviewui.com/uview/album/5.jpg', |
|||
'https://cdn.uviewui.com/uview/album/6.jpg', |
|||
'https://cdn.uviewui.com/uview/album/7.jpg', |
|||
'https://cdn.uviewui.com/uview/album/8.jpg', |
|||
'https://cdn.uviewui.com/uview/album/9.jpg', |
|||
'https://cdn.uviewui.com/uview/album/10.jpg', |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.loadmore() |
|||
}, |
|||
methods: { |
|||
scrolltolower() { |
|||
this.loadmore() |
|||
}, |
|||
loadmore() { |
|||
for (let i = 0; i < 30; i++) { |
|||
this.indexList.push({ |
|||
url: this.urls[uni.$u.random(0, this.urls.length - 1)] |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
status="loading" |
|||
:isDot="true" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">无更多数据</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
:line="true" |
|||
status="nomore" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">加载更多(点击触发事件)</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
:line="true" |
|||
status="loadmore" |
|||
@loadmore="loadmore" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
status="loading" |
|||
loadingIcon="circle" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示点</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
status="nomore" |
|||
:isDot="true" |
|||
:line="true" |
|||
color="#909399" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义提示语</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-loadmore |
|||
status="loading" |
|||
loadingText="努力加载中,先喝杯茶" |
|||
color="#909399" |
|||
></u-loadmore> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
loadmore() { |
|||
console.log('loadmore'); |
|||
uni.$u.toast('加载更多') |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="模态框" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-gap |
|||
height="20" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<u-cell-group> |
|||
<u-cell |
|||
@click="showModal(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-modal |
|||
:content="content" |
|||
title="标题" |
|||
:show="show1" |
|||
@confirm="() => show1 = false" |
|||
></u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
:show="show2" |
|||
@confirm="() => show2 = false" |
|||
></u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
:show="show3" |
|||
showCancelButton |
|||
closeOnClickOverlay |
|||
@confirm="confirm" |
|||
@cancel="cancel" |
|||
@close="close" |
|||
></u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
:show="show4" |
|||
showCancelButton |
|||
asyncClose |
|||
@confirm="confirm4" |
|||
@cancel="() => show4 = false" |
|||
></u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
:show="show5" |
|||
showCancelButton |
|||
buttonReverse |
|||
@confirm="() => show5 = false" |
|||
@cancel="() => show5 = false" |
|||
></u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
title="标题" |
|||
:show="show6" |
|||
closeOnClickOverlay |
|||
@confirm="() => show6 = false" |
|||
@close="() => show6 = false" |
|||
></u-modal> |
|||
<u-modal |
|||
title="利剑出鞘,一统江湖" |
|||
:show="show7" |
|||
closeOnClickOverlay |
|||
@confirm="() => show7 = false" |
|||
> |
|||
<image |
|||
style="width: 80px;height: 80px;" |
|||
src="/static/uview/common/logo.png" |
|||
></image> |
|||
</u-modal> |
|||
<u-modal |
|||
title="标题" |
|||
:show="show8" |
|||
:content="content" |
|||
closeOnClickOverlay |
|||
showCancelButton |
|||
> |
|||
<u-button |
|||
slot="confirmButton" |
|||
text="确定" |
|||
type="success" |
|||
shape="circle" |
|||
@click="show8 = false" |
|||
></u-button> |
|||
</u-modal> |
|||
<u-modal |
|||
:content="content" |
|||
title="标题" |
|||
:show="show9" |
|||
:zoom="false" |
|||
@confirm="() => show9 = false" |
|||
></u-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
content: '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作', |
|||
show1: false, |
|||
show2: false, |
|||
show3: false, |
|||
show4: false, |
|||
show5: false, |
|||
show6: false, |
|||
show7: false, |
|||
show8: false, |
|||
show9: false, |
|||
list: [{ |
|||
title: '基础使用', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png' |
|||
}, |
|||
{ |
|||
title: '无标题', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png' |
|||
}, |
|||
{ |
|||
title: '带取消按钮', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png' |
|||
}, |
|||
{ |
|||
title: '异步关闭', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png' |
|||
}, |
|||
{ |
|||
title: '对调取消和确认按钮', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png' |
|||
}, |
|||
{ |
|||
title: '允许点击遮罩关闭', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png' |
|||
}, |
|||
{ |
|||
title: '传入slot', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png' |
|||
}, |
|||
{ |
|||
title: '自定义按钮', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png' |
|||
}, |
|||
{ |
|||
title: '淡入淡出动画', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
showModal(index) { |
|||
this[`show${index + 1}`] = true |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
confirm4() { |
|||
setTimeout(() => { |
|||
this.show4 = false |
|||
}, 2000) |
|||
}, |
|||
confirm() { |
|||
this.show3 = false |
|||
console.log('confirm'); |
|||
}, |
|||
cancel() { |
|||
this.show3 = false |
|||
console.log('cancel'); |
|||
}, |
|||
close() { |
|||
this.show3 = false |
|||
console.log('close'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-navbar |
|||
title="导航栏" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
@leftClick="navigateBack" |
|||
> |
|||
</u-navbar> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">基础功能</text> |
|||
<u-navbar |
|||
title="个人中心" |
|||
@rightClick="rightClick" |
|||
@leftClick="leftClick" |
|||
> |
|||
</u-navbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义文本</text> |
|||
<u-navbar |
|||
title="个人中心" |
|||
left-text="返回" |
|||
rightIcon="map" |
|||
> |
|||
</u-navbar> |
|||
</view> |
|||
<view class="u-page__item"> |
|||
<text class="u-page__item__title">自定义插槽</text> |
|||
<u-navbar |
|||
leftText="返回" |
|||
title="个人中心" |
|||
:safeAreaInsetTop="false" |
|||
> |
|||
<view |
|||
class="u-nav-slot" |
|||
slot="left" |
|||
> |
|||
<u-icon |
|||
name="arrow-left" |
|||
size="19" |
|||
></u-icon> |
|||
<u-line |
|||
direction="column" |
|||
:hairline="false" |
|||
length="16" |
|||
margin="0 8px" |
|||
></u-line> |
|||
<u-icon |
|||
name="home" |
|||
size="20" |
|||
></u-icon> |
|||
</view> |
|||
</u-navbar> |
|||
</view> |
|||
<u-gap height="50"></u-gap> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
navigateBack() { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
rightClick() { |
|||
console.log('rightClick'); |
|||
}, |
|||
leftClick() { |
|||
console.log('leftClick'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifndef APP-NVUE */ |
|||
page { |
|||
background-color: $u-bg-color; |
|||
} |
|||
|
|||
/* #endif */ |
|||
|
|||
.u-page { |
|||
padding: 0; |
|||
|
|||
&__item { |
|||
|
|||
&__title { |
|||
color: $u-tips-color; |
|||
background-color: $u-bg-color; |
|||
padding: 15px; |
|||
font-size: 15px; |
|||
|
|||
&__slot-title { |
|||
color: $u-primary; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-nav-slot { |
|||
@include flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-width: 0.5px; |
|||
border-radius: 100px; |
|||
border-color: $u-border-color; |
|||
padding: 3px 7px; |
|||
opacity: 0.8; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-no-network |
|||
@disconnected="disconnected" |
|||
@connected="connected" |
|||
@retry="retry" |
|||
></u-no-network> |
|||
<view class="u-content"> |
|||
<view class="u-content__circle"> |
|||
<u-icon |
|||
name="checkbox-mark" |
|||
color="#fff" |
|||
size="30" |
|||
></u-icon> |
|||
</view> |
|||
<text class="u-content__normal">网络正常</text> |
|||
<text class="u-content__tips">请您断开设备的WiFi和数据连接(或开启飞行模式)，即可看到效果</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
methods: { |
|||
disconnected() { |
|||
console.log('disconnected'); |
|||
}, |
|||
connected() { |
|||
console.log('connected'); |
|||
}, |
|||
retry() { |
|||
console.log('retry'); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-content { |
|||
padding: 150px 60px 0; |
|||
@include flex(column); |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&__circle { |
|||
background-color: $u-success; |
|||
@include flex; |
|||
border-radius: 100px; |
|||
width: 60px; |
|||
height: 60px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
&__normal { |
|||
font-size: 15px; |
|||
color: $u-success; |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
&__tips { |
|||
color: $u-tips-color; |
|||
font-size: 13px; |
|||
margin-top: 15px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
<template> |
|||
<view class="u-page" ref="page"> |
|||
<u-navbar |
|||
title="选择器" |
|||
@leftClick="navigateBack" |
|||
safeAreaInsetTop |
|||
fixed |
|||
placeholder |
|||
></u-navbar> |
|||
<u-cell-group> |
|||
<u-cell |
|||
@click="showPicker(index)" |
|||
:title="item.title" |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
isLink |
|||
> |
|||
<image |
|||
slot="icon" |
|||
class="u-cell-icon" |
|||
:src="item.iconUrl" |
|||
mode="widthFix" |
|||
></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
<u-picker |
|||
:show="show1" |
|||
:columns="columns1" |
|||
@change="change" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
></u-picker> |
|||
<u-picker |
|||
:show="show2" |
|||
:columns="columns2" |
|||
:defaultIndex="[1]" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
@change="change" |
|||
></u-picker> |
|||
<u-picker |
|||
:show="show3" |
|||
:columns="columns3" |
|||
ref="uPicker3" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
@change="changeHandler1" |
|||
></u-picker> |
|||
<u-picker |
|||
:show="show4" |
|||
:columns="columns4" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
:loading="loading" |
|||
@change="changeHandler2" |
|||
ref="uPicker4" |
|||
></u-picker> |
|||
<u-picker |
|||
:show="show5" |
|||
:columns="columns5" |
|||
title="标题太长就会显示省略号" |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
@change="change" |
|||
></u-picker> |
|||
<u-picker |
|||
:show="show6" |
|||
:columns="columns6" |
|||
closeOnClickOverlay |
|||
@cancel="cancel" |
|||
@confirm="confirm" |
|||
@close="close" |
|||
@change="change" |
|||
></u-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
index: 0, |
|||
loading: false, |
|||
columnData: [ |
|||
['深圳', '厦门', '上海', '拉萨'], |
|||
['得州', '华盛顿', '纽约', '阿拉斯加'] |
|||
], |
|||
columns1: [ |
|||
['中国', '美国', '日本'] |
|||
], |
|||
columns2: [ |
|||
['中国', '美国', '日本'] |
|||
], |
|||
columns3: [ |
|||
['中国', '美国'], |
|||
['深圳', '厦门', '上海', '拉萨'] |
|||
], |
|||
columns4: [ |
|||
['中国', '美国'], |
|||
['深圳', '厦门', '上海', '拉萨'] |
|||
], |
|||
columns5: [ |
|||
['中国', '美国', '日本'] |
|||
], |
|||
columns6: [ |
|||
['中国', '美国', '日本'] |
|||
], |
|||
show1: false, |
|||
show2: false, |
|||
show3: false, |
|||
show4: false, |
|||
show5: false, |
|||
show6: false, |
|||
list: [{ |
|||
title: '基础使用', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png' |
|||
}, |
|||
{ |
|||
title: '设置默认项', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png' |
|||
}, |
|||
{ |
|||
title: '多列联动', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png' |
|||
}, |
|||
{ |
|||
title: '加载中状态(切换第一列)', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png' |
|||
}, |
|||
{ |
|||
title: '设置标题', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png' |
|||
}, { |
|||
title: '允许点击遮罩关闭', |
|||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
changeHandler1(e) { |
|||
this.change(e) |
|||
const { |
|||
columnIndex, |
|||
value, |
|||
values, |
|||
index, |
|||
// 微信小程序无法将picker实例传出来，只能通过ref操作 |
|||
picker = this.$refs.uPicker3 |
|||
} = e |
|||
if (columnIndex === 0) { |
|||
picker.setColumnValues(1, this.columnData[index]) |
|||
} |
|||
}, |
|||
changeHandler2(e) { |
|||
this.change(e) |
|||
const { |
|||
columnIndex, |
|||
value, |
|||
values, |
|||
index, |
|||
// 微信小程序无法将picker实例传出来，只能通过ref操作 |
|||
picker = this.$refs.uPicker4 |
|||
} = e |
|||
if (columnIndex === 0) { |
|||
this.loading = true |
|||
uni.$u.sleep(1500).then(() => { |
|||
picker.setColumnValues(1, this.columnData[index]) |
|||
this.loading = false |
|||
}) |
|||
} |
|||
}, |
|||
navigateBack() { |
|||
uni.navigateBack() |
|||
}, |
|||
change(e) { |
|||
// console.log('change', e); |
|||
}, |
|||
showPicker(index) { |
|||
this.index = index + 1 |
|||
this[`show${index + 1}`] = true |
|||
}, |
|||
close() { |
|||
// console.log('close'); |
|||
this[`show${this.index}`] = false |
|||
}, |
|||
confirm(e) { |
|||
// console.log('confirm', e); |
|||
this[`show${this.index}`] = false |
|||
}, |
|||
cancel() { |
|||
// console.log('cancel'); |
|||
this[`show${this.index}`] = false |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,49 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<u-read-more |
|||
ref="uReadMore" |
|||
:showHeight="showHeight" |
|||
toggle |
|||
@open="open" |
|||
@close="close" |
|||
> |
|||
<u-parse |
|||
:content="content" |
|||
@load="load" |
|||
:tag-style="tagStyle" |
|||
></u-parse> |
|||
</u-read-more> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
content: `<p>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 |
|||
忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。 |
|||
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。 |
|||
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。</p>`, |
|||
showHeight: 200, |
|||
tagStyle: { |
|||
p: 'color: #606266; line-height: 24px;' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
load() { |
|||
this.$refs.uReadMore.init() |
|||
}, |
|||
open(name) { |
|||
console.log('open', name); |
|||
}, |
|||
close(name) { |
|||
console.log('close', name); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title" style="margin-bottom: 15px;">基础使用</text> |
|||
<u-scroll-list |
|||
indicatorColor="#fff0f0" |
|||
indicatorActiveColor="#f56c6c" |
|||
@right="right" |
|||
@left="left" |
|||
> |
|||
<view |
|||
class="scroll-list" |
|||
style="flex-direction: row;" |
|||
> |
|||
<view |
|||
class="scroll-list__goods-item" |
|||
v-for="(item, index) in goodsArr" |
|||
:key="index" |
|||
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" |
|||
> |
|||
<image |
|||
class="scroll-list__goods-item__image" |
|||
:src="goodsBaseUrl + item.thumbnail" |
|||
mode="" |
|||
></image> |
|||
<text class="scroll-list__goods-item__text">￥{{ item.price }}</text> |
|||
</view> |
|||
<view |
|||
class="scroll-list__show-more" |
|||
@tap="showMore" |
|||
> |
|||
<text class="scroll-list__show-more__text">查看更多</text> |
|||
<u-icon |
|||
name="arrow-leftward" |
|||
color="#f56c6c" |
|||
size="12" |
|||
></u-icon> |
|||
</view> |
|||
</view> |
|||
</u-scroll-list> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">多菜单扩展</text> |
|||
<u-scroll-list> |
|||
<view class="scroll-list"> |
|||
<view |
|||
class="scroll-list__line" |
|||
v-for="(item, index) in menuArr" |
|||
:key="index" |
|||
> |
|||
<view |
|||
class="scroll-list__line__item" |
|||
v-for="(item1, index1) in item" |
|||
:key="index1" |
|||
:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']" |
|||
> |
|||
<image |
|||
class="scroll-list__line__item__image" |
|||
:src="menuBaseUrl + item1.icon" |
|||
mode="" |
|||
></image> |
|||
<text class="scroll-list__line__item__text">{{ item1.name }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-scroll-list> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/', |
|||
menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/', |
|||
goodsArr: [{ |
|||
price: '230.5', |
|||
thumbnail: '1.jpg' |
|||
}, |
|||
{ |
|||
price: '74.1', |
|||
thumbnail: '2.jpg' |
|||
}, |
|||
{ |
|||
price: '8457', |
|||
thumbnail: '6.jpg' |
|||
}, |
|||
{ |
|||
price: '1442', |
|||
thumbnail: '5.jpg' |
|||
}, |
|||
{ |
|||
price: '541', |
|||
thumbnail: '2.jpg' |
|||
}, |
|||
{ |
|||
price: '234', |
|||
thumbnail: '3.jpg' |
|||
}, |
|||
{ |
|||
price: '562', |
|||
thumbnail: '4.jpg' |
|||
}, |
|||
{ |
|||
price: '251.5', |
|||
thumbnail: '1.jpg' |
|||
} |
|||
], |
|||
menuArr: [ |
|||
[{ |
|||
name: '天猫新品', |
|||
icon: '11.png' |
|||
}, |
|||
{ |
|||
name: '今日爆款', |
|||
icon: '9.png' |
|||
}, { |
|||
name: '天猫国际', |
|||
icon: '17.png' |
|||
}, { |
|||
name: '饿了么', |
|||
icon: '6.png' |
|||
}, { |
|||
name: '天猫超市', |
|||
icon: '11.png' |
|||
}, { |
|||
name: '分类', |
|||
icon: '2.png' |
|||
}, { |
|||
name: '天猫美食', |
|||
icon: '3.png' |
|||
}, { |
|||
name: '阿里健康', |
|||
icon: '12.png' |
|||
}, { |
|||
name: '口碑生活', |
|||
icon: '7.png' |
|||
} |
|||
], |
|||
[{ |
|||
name: '充值中心', |
|||
icon: '8.png' |
|||
}, |
|||
{ |
|||
name: '机票酒店', |
|||
icon: '10.png' |
|||
}, { |
|||
name: '金币庄园', |
|||
icon: '18.png' |
|||
}, { |
|||
name: '阿里拍卖', |
|||
icon: '15.png' |
|||
}, { |
|||
name: '淘宝吃货', |
|||
icon: '16.png' |
|||
}, { |
|||
name: '闲鱼', |
|||
icon: '4.png' |
|||
}, { |
|||
name: '会员中心', |
|||
icon: '6.png' |
|||
}, { |
|||
name: '造点新货', |
|||
icon: '13.png' |
|||
}, { |
|||
name: '土货鲜食', |
|||
icon: '14.png' |
|||
} |
|||
] |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
showMore() { |
|||
uni.$u.toast('查看更多') |
|||
}, |
|||
left() { |
|||
console.log('left'); |
|||
}, |
|||
right() { |
|||
console.log('right'); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.scroll-list { |
|||
@include flex(column); |
|||
|
|||
&__goods-item { |
|||
margin-right: 20px; |
|||
|
|||
&__image { |
|||
width: 60px; |
|||
height: 60px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
&__text { |
|||
color: #f56c6c; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
|
|||
&__show-more { |
|||
background-color: #fff0f0; |
|||
border-radius: 3px; |
|||
padding: 3px 6px; |
|||
@include flex(column); |
|||
align-items: center; |
|||
|
|||
&__text { |
|||
font-size: 12px; |
|||
width: 12px; |
|||
color: #f56c6c; |
|||
line-height: 16px; |
|||
} |
|||
} |
|||
|
|||
&__line { |
|||
@include flex; |
|||
margin-top: 10px; |
|||
|
|||
&__item { |
|||
margin-right: 15px; |
|||
|
|||
&__image { |
|||
width: 61px; |
|||
height: 48px; |
|||
} |
|||
|
|||
&__text { |
|||
margin-top: 5px; |
|||
color: $u-content-color; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
} |
|||
|
|||
&--no-margin-right { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
rows="3" |
|||
title |
|||
loading |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义段落行数</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
rows="2" |
|||
title |
|||
loading |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置段落宽度</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
rows="2" |
|||
title |
|||
:rowsWidth="['100%', '35%']" |
|||
loading |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置段落高度</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
rows="3" |
|||
title |
|||
:rowsWidth="['100%', '100%', '100%']" |
|||
:rowsHeight="['18px', '18px', '80px']" |
|||
loading |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">是否开启动画</text> |
|||
<u-switch |
|||
v-model="switch1" |
|||
space="2" |
|||
inactiveColor="#e6e6e6" |
|||
></u-switch> |
|||
<u-gap |
|||
height="15" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
:animate="switch1" |
|||
rows="3" |
|||
title |
|||
loading |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">展示头像</text> |
|||
<u-gap |
|||
height="15" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
:animate="switch1" |
|||
rows="3" |
|||
title |
|||
loading |
|||
avatar |
|||
></u-skeleton> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">切换状态</text> |
|||
<u-switch |
|||
v-model="switch2" |
|||
space="2" |
|||
inactiveColor="#e6e6e6" |
|||
></u-switch> |
|||
<u-gap |
|||
height="15" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<view class="u-demo-block__content"> |
|||
<u-skeleton |
|||
rows="2" |
|||
title |
|||
:loading="switch2" |
|||
avatar |
|||
rowsHeight="14" |
|||
> |
|||
<!-- 需要在外部多嵌套一层占位view，否则在nvue下会导致样式失效 --> |
|||
<view> |
|||
<view class="u-skeleton-slot"> |
|||
<image |
|||
src="/static/uview/common/logo.png" |
|||
class="u-skeleton-slot__image" |
|||
></image> |
|||
<view class="u-skeleton-slot__content"> |
|||
<u--text |
|||
text="利剑出鞘,一统江湖" |
|||
type="main" |
|||
size="16" |
|||
></u--text> |
|||
<u--text |
|||
type="tips" |
|||
size="14" |
|||
customStyle="margin-top: 5px" |
|||
text="众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-skeleton> |
|||
</view> |
|||
<u-gap height="50" bgColor="transparent"></u-gap> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
switch1: true, |
|||
switch2: false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-skeleton-slot { |
|||
@include flex; |
|||
align-items: flex-start; |
|||
|
|||
&__image { |
|||
width: 40px; |
|||
height: 40px; |
|||
border-radius: 100px; |
|||
} |
|||
|
|||
&__content { |
|||
margin-left: 10px; |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础演示</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps :current="current1"> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示点类型</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps |
|||
:current="1" |
|||
dot |
|||
> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
<u-steps |
|||
:current="1" |
|||
dot |
|||
direction="column" |
|||
> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">错误状态</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps :current="1"> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
error |
|||
title="仓库着火" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="破产清算" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps |
|||
:current="1" |
|||
activeIcon="checkmark" |
|||
inactiveIcon="arrow-right" |
|||
> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义插槽</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps :current="1"> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
<text class="slot-icon" slot="icon">运</text> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义颜色</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps :current="1" activeColor="#3c9cff"> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">竖向展示</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-steps |
|||
:current="1" |
|||
direction="column" |
|||
> |
|||
<u-steps-item |
|||
title="已下单" |
|||
desc="10:30" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="已出库" |
|||
desc="10:35" |
|||
> |
|||
</u-steps-item> |
|||
<u-steps-item |
|||
title="运输中" |
|||
desc="11:40" |
|||
> |
|||
</u-steps-item> |
|||
</u-steps> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current1: 1 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.slot-icon { |
|||
width: 21px; |
|||
height: 21px; |
|||
background-color: $u-warning; |
|||
border-radius: 100px; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
line-height: 21px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-subsection |
|||
:list="list" |
|||
mode="subsection" |
|||
:current="current1" |
|||
@change="change1" |
|||
></u-subsection> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">按钮模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-subsection |
|||
:list="list" |
|||
mode="button" |
|||
:current="current2" |
|||
@change="change2" |
|||
></u-subsection> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">更换主题</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-subsection |
|||
:list="list" |
|||
mode="subsection" |
|||
:current="current3" |
|||
activeColor="#f56c6c" |
|||
@change="change3" |
|||
></u-subsection> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">默认位置</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-subsection |
|||
:list="list" |
|||
mode="button" |
|||
:current="current4" |
|||
activeColor="#f9ae3d" |
|||
@change="change4" |
|||
></u-subsection> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current1: 0, |
|||
current2: 0, |
|||
current3: 0, |
|||
current4: 1, |
|||
list: ['未付款', '待评价', '已付款'], |
|||
// 或者如下，也可以配置keyName参数修改对象键值 |
|||
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}], |
|||
current: 1 |
|||
} |
|||
}, |
|||
methods: { |
|||
change1(index) { |
|||
this.current1 = index |
|||
}, |
|||
change2(index) { |
|||
this.current2 = index |
|||
}, |
|||
change3(index) { |
|||
this.current3 = index |
|||
}, |
|||
change4(index) { |
|||
this.current4 = index |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.album { |
|||
@include flex; |
|||
align-items: flex-start; |
|||
|
|||
&__avatar { |
|||
background-color: $u-bg-color; |
|||
padding: 5px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
&__content { |
|||
margin-left: 10px; |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<u-swiper |
|||
:list="list1" |
|||
@change="change" |
|||
@click="click" |
|||
></u-swiper> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">带标题</text> |
|||
<u-swiper |
|||
:list="list2" |
|||
keyName="image" |
|||
showTitle |
|||
:autoplay="false" |
|||
circular |
|||
></u-swiper> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">带指示器</text> |
|||
<u-swiper |
|||
:list="list3" |
|||
indicator |
|||
indicatorMode="line" |
|||
circular |
|||
></u-swiper> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">加载中</text> |
|||
<u-swiper |
|||
:list="list3" |
|||
loading |
|||
></u-swiper> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">嵌入视频</text> |
|||
<u-swiper |
|||
:list="list4" |
|||
keyName="url" |
|||
:autoplay="false" |
|||
></u-swiper> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义指示器</text> |
|||
<u-swiper |
|||
:list="list5" |
|||
@change="e => current = e.current" |
|||
:autoplay="false" |
|||
> |
|||
<view |
|||
slot="indicator" |
|||
class="indicator" |
|||
> |
|||
<view |
|||
class="indicator__dot" |
|||
v-for="(item, index) in list5" |
|||
:key="index" |
|||
:class="[index === current && 'indicator__dot--active']" |
|||
> |
|||
</view> |
|||
</view> |
|||
</u-swiper> |
|||
<u-gap |
|||
bgColor="transparent" |
|||
height="15" |
|||
></u-gap> |
|||
<u-swiper |
|||
:list="list6" |
|||
@change="e => currentNum = e.current" |
|||
:autoplay="false" |
|||
indicatorStyle="right: 20px" |
|||
> |
|||
<view |
|||
slot="indicator" |
|||
class="indicator-num" |
|||
> |
|||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text> |
|||
</view> |
|||
</u-swiper> |
|||
</view> |
|||
<!-- #ifndef APP-NVUE || MP-TOUTIAO --> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">卡片式</text> |
|||
<u-swiper |
|||
:list="list3" |
|||
previousMargin="30" |
|||
nextMargin="30" |
|||
circular |
|||
:autoplay="false" |
|||
radius="5" |
|||
bgColor="#ffffff" |
|||
></u-swiper> |
|||
</view> |
|||
<!-- #endif --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
currentNum: 0, |
|||
list: [{ |
|||
// image: 'https://cdn.uviewui.com/uview/resources/video.mp4', |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
title: '昨夜星辰昨夜风，画楼西畔桂堂东', |
|||
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
title: '身无彩凤双飞翼，心有灵犀一点通' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|||
} |
|||
], |
|||
list1: [ |
|||
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
], |
|||
list2: [{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
title: '昨夜星辰昨夜风，画楼西畔桂堂东', |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
title: '身无彩凤双飞翼，心有灵犀一点通' |
|||
}, |
|||
{ |
|||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|||
} |
|||
], |
|||
list3: [ |
|||
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
], |
|||
list4: [{ |
|||
url: 'https://cdn.uviewui.com/uview/resources/video.mp4', |
|||
title: '昨夜星辰昨夜风，画楼西畔桂堂东', |
|||
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' |
|||
}, |
|||
{ |
|||
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
title: '身无彩凤双飞翼，心有灵犀一点通' |
|||
}, |
|||
{ |
|||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
|||
} |
|||
], |
|||
list5: [ |
|||
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
], |
|||
list6: [ |
|||
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|||
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
// console.log('change', e); |
|||
}, |
|||
click(e) { |
|||
console.log('click', e); |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.indicator { |
|||
@include flex(row); |
|||
justify-content: center; |
|||
|
|||
&__dot { |
|||
height: 6px; |
|||
width: 6px; |
|||
border-radius: 100px; |
|||
background-color: rgba(255, 255, 255, 0.35); |
|||
margin: 0 5px; |
|||
transition: background-color 0.3s; |
|||
|
|||
&--active { |
|||
background-color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.indicator-num { |
|||
padding: 2px 0; |
|||
background-color: rgba(0, 0, 0, 0.35); |
|||
border-radius: 100px; |
|||
width: 35px; |
|||
@include flex; |
|||
justify-content: center; |
|||
|
|||
&__text { |
|||
color: #FFFFFF; |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--form> |
|||
<u-form-item lable="电话"></u-form-item> |
|||
</u--form> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础演示</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs :list="list1" @click="click" :current="3"> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
<view |
|||
class="u-demo-block" |
|||
style="margin-bottom: 0;" |
|||
> |
|||
<text class="u-demo-block__title">粘性布局</text> |
|||
</view> |
|||
<u-sticky bgColor="#fff"> |
|||
<u-tabs |
|||
:list="list1" |
|||
sticky |
|||
> |
|||
</u-tabs> |
|||
</u-sticky> |
|||
<u-gap |
|||
height="23" |
|||
bgColor="#fff" |
|||
></u-gap> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示徽标</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs :list="list2"> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁止滚动</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs :list="list6" :scrollable="false"> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用菜单</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs :list="list3"> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自定义样式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs |
|||
:list="list4" |
|||
lineWidth="30" |
|||
lineColor="#f56c6c" |
|||
:activeStyle="{ |
|||
color: '#303133', |
|||
fontWeight: 'bold', |
|||
transform: 'scale(1.05)' |
|||
}" |
|||
:inactiveStyle="{ |
|||
color: '#606266', |
|||
transform: 'scale(1)' |
|||
}" |
|||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" |
|||
> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">右侧自定义插槽</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tabs :list="list1"> |
|||
<view |
|||
slot="right" |
|||
style="padding-left: 4px;" |
|||
@tap="$u.toast('插槽被点击')" |
|||
> |
|||
<u-icon |
|||
name="list" |
|||
size="21" |
|||
bold |
|||
></u-icon> |
|||
</view> |
|||
</u-tabs> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
mixins: [uni.$u.mixin], |
|||
data() { |
|||
return { |
|||
list1: [{ |
|||
name: '关注', |
|||
}, { |
|||
name: '推荐', |
|||
}, { |
|||
name: '电影' |
|||
}, { |
|||
name: '科技' |
|||
}, { |
|||
name: '音乐' |
|||
}, { |
|||
name: '美食' |
|||
}, { |
|||
name: '文化' |
|||
}, { |
|||
name: '财经' |
|||
}, { |
|||
name: '手工' |
|||
}], |
|||
list2: [{ |
|||
name: '关注' |
|||
}, { |
|||
name: '推荐', |
|||
badge: { |
|||
isDot: true |
|||
} |
|||
}, { |
|||
name: '电影', |
|||
badge: { |
|||
value: 5, |
|||
} |
|||
}, { |
|||
name: '科技' |
|||
}, { |
|||
name: '音乐' |
|||
}, { |
|||
name: '美食' |
|||
}, { |
|||
name: '文化' |
|||
}, { |
|||
name: '财经' |
|||
}, { |
|||
name: '手工' |
|||
}], |
|||
list3: [{ |
|||
name: '关注' |
|||
}, { |
|||
name: '推荐', |
|||
}, { |
|||
name: '电影', |
|||
disabled: true |
|||
}, { |
|||
name: '科技' |
|||
}, { |
|||
name: '音乐' |
|||
}, { |
|||
name: '美食' |
|||
}, { |
|||
name: '文化' |
|||
}, { |
|||
name: '财经' |
|||
}, { |
|||
name: '手工' |
|||
}], |
|||
list4: [{ |
|||
name: '关注' |
|||
}, { |
|||
name: '推荐', |
|||
badge: { |
|||
isDot: true |
|||
} |
|||
}, { |
|||
name: '电影', |
|||
}, { |
|||
name: '科技' |
|||
}, { |
|||
name: '音乐' |
|||
}, { |
|||
name: '美食' |
|||
}, { |
|||
name: '文化' |
|||
}, { |
|||
name: '财经' |
|||
}, { |
|||
name: '手工' |
|||
}], |
|||
list6: [ |
|||
{ |
|||
name: '关注' |
|||
}, { |
|||
name: '推荐', |
|||
}, { |
|||
name: '电影', |
|||
}, { |
|||
name: '科技' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
click(item) { |
|||
console.log('item', item); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
padding-bottom: 500px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础功能</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text text="我用十年青春,赴你最后之约"></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">设置主题</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
text="主色" |
|||
type="primary" |
|||
></u--text> |
|||
</view> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
type="error" |
|||
text="错误" |
|||
></u--text> |
|||
</view> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
type="success" |
|||
text="成功" |
|||
></u--text> |
|||
</view> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
type="warning" |
|||
text="警告" |
|||
></u--text> |
|||
</view> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
type="info" |
|||
text="信息" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">拨打电话</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
mode="phone" |
|||
text="15019479320" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">日期格式化</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
mode="date" |
|||
text="1612959739" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">姓名脱敏</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
mode="name" |
|||
text="张三三" |
|||
format="encrypt" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">超链接</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
mode="link" |
|||
text="Go to uView docs" |
|||
href="https://www.uviewui.com" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">显示金额</text> |
|||
<view class="u-demo-block__content"> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
mode="price" |
|||
text="728732.32" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">前后图标</text> |
|||
<view class="u-demo-block__content"> |
|||
<view |
|||
class="u-page__text-item" |
|||
style="margin-right: 50px;" |
|||
> |
|||
<u--text |
|||
prefixIcon="baidu" |
|||
iconStyle="font-size: 19px" |
|||
text="百度一下" |
|||
></u--text> |
|||
</view> |
|||
<view class="u-page__text-item"> |
|||
<u--text |
|||
suffixIcon="arrow-rightward" |
|||
iconStyle="font-size: 18px" |
|||
text="查看更多" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">超出隐藏</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--text |
|||
:lines="2" |
|||
text="关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">小程序开放能力</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--text |
|||
text="分享到微信" |
|||
openType="share" |
|||
type="success" |
|||
@click="clickHandler" |
|||
></u--text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
onLoad() {}, |
|||
methods: { |
|||
clickHandler() { |
|||
// #ifndef MP-WEIXIN |
|||
uni.$u.toast('请在微信小程序内查看效果') |
|||
// #endif |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page__text-item { |
|||
margin-right: 10px; |
|||
flex: 1; |
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
@include flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--textarea |
|||
v-model="value1" |
|||
placeholder="请输入内容" |
|||
></u--textarea> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">字数统计</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--textarea |
|||
v-model="value2" |
|||
placeholder="请输入内容" |
|||
count |
|||
></u--textarea> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自动增高</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--textarea |
|||
v-model="value3" |
|||
placeholder="请输入内容" |
|||
autoHeight |
|||
></u--textarea> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">禁用状态</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--textarea |
|||
v-model="value4" |
|||
placeholder="文本域已被禁用" |
|||
disabled |
|||
count |
|||
></u--textarea> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">下划线模式</text> |
|||
<view class="u-demo-block__content"> |
|||
<u--textarea |
|||
v-model="value5" |
|||
placeholder="请输入内容" |
|||
border="bottom" |
|||
></u--textarea> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
value1: '', |
|||
value2: '统计字数', |
|||
value3: '', |
|||
value4: '', |
|||
value5: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
formatter(value) { |
|||
return value.replace(/[^0-9]/ig,"") |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<view class="u-page"> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">基础使用</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tooltip |
|||
:text="text1" |
|||
overlay |
|||
></u-tooltip> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">下方显示</text> |
|||
<view class="u-demo-block__content" style="padding-bottom: 30px;"> |
|||
<u-tooltip |
|||
:text="text2" |
|||
direction="bottom" |
|||
></u-tooltip> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">扩展按钮</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tooltip |
|||
:text="text3" |
|||
:buttons="buttons1" |
|||
@click="click" |
|||
></u-tooltip> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">自动调整位置</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tooltip |
|||
:text="text4" |
|||
:buttons="buttons2" |
|||
></u-tooltip> |
|||
</view> |
|||
</view> |
|||
<view class="u-demo-block"> |
|||
<text class="u-demo-block__title">高亮选中文本背景色</text> |
|||
<view class="u-demo-block__content"> |
|||
<u-tooltip |
|||
:text="text5" |
|||
:buttons="buttons3" |
|||
bgColor="#e3e4e6" |
|||
></u-tooltip> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
text1: '长按文本，上方提示', |
|||
text2: '长按文本，下方提示', |
|||
text3: '显示多个扩展按钮', |
|||
text4: '自动调整气泡位置', |
|||
text5: '长按文本，显示背景色', |
|||
buttons1: ['扩展'], |
|||
buttons2: ['扩展', '搜索', '翻译'], |
|||
buttons3: ['扩展', '搜索', '翻译'] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
click(index) { |
|||
console.log('index', index); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.u-page { |
|||
|
|||
} |
|||
|
|||
.u-demo-block__content { |
|||
padding-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,418 @@ |
|||
export default [{ |
|||
groupName: '基础组件', |
|||
groupName_en: 'Basic components', |
|||
list: [{ |
|||
path: '/pages/componentsB/color/color', |
|||
icon: 'color', |
|||
title: 'Color 色彩', |
|||
title_en: 'Color' |
|||
}, { |
|||
path: '/pages/componentsA/icon/icon', |
|||
icon: 'icon', |
|||
title: 'Icon 图标', |
|||
title_en: 'Icon' |
|||
}, { |
|||
path: '/pages/componentsA/image/image', |
|||
icon: 'image', |
|||
title: 'Image 图片', |
|||
title_en: 'Image' |
|||
}, { |
|||
path: '/pages/componentsA/button/button', |
|||
icon: 'button', |
|||
title: 'Button 按钮', |
|||
title_en: 'Button' |
|||
}, { |
|||
path: '/pages/componentsC/text/text', |
|||
icon: 'text', |
|||
title: 'Text 文本', |
|||
title_en: 'Text' |
|||
}, { |
|||
path: '/pages/componentsC/layout/layout', |
|||
icon: 'layout', |
|||
title: 'Layout 布局', |
|||
title_en: 'Layout' |
|||
}, { |
|||
path: '/pages/componentsA/cell/cell', |
|||
icon: 'cell', |
|||
title: 'Cell 单元格', |
|||
title_en: 'Cell' |
|||
}, { |
|||
path: '/pages/componentsB/badge/badge', |
|||
icon: 'badge', |
|||
title: 'Badge 徽标数', |
|||
title_en: 'Badge' |
|||
}, { |
|||
path: '/pages/componentsB/tag/tag', |
|||
icon: 'tag', |
|||
title: 'Tag 标签', |
|||
title_en: 'Tag' |
|||
}, { |
|||
path: '/pages/componentsA/loading-icon/loading-icon', |
|||
icon: 'loading', |
|||
title: 'Loading 加载动画', |
|||
title_en: 'loading Icon' |
|||
}, { |
|||
path: '/pages/componentsA/loading-page/loading-page', |
|||
icon: 'loading-page', |
|||
title: 'Loading page 加载页', |
|||
title_en: 'Loading Page' |
|||
}] |
|||
}, |
|||
{ |
|||
groupName: '表单组件', |
|||
groupName_en: 'Form components', |
|||
list: [{ |
|||
path: '/pages/componentsC/form/form', |
|||
icon: 'form', |
|||
title: 'Form 表单', |
|||
title_en: 'Form' |
|||
}, { |
|||
path: '/pages/componentsC/calendar/calendar', |
|||
icon: 'calendar', |
|||
title: 'Calendar 日历', |
|||
title_en: 'Calendar' |
|||
}, { |
|||
path: '/pages/componentsB/keyboard/keyboard', |
|||
icon: 'keyboard', |
|||
title: 'Keyboard 键盘', |
|||
title_en: 'Keyboard' |
|||
}, { |
|||
path: '/pages/componentsC/picker/picker', |
|||
icon: 'picker', |
|||
title: 'Picker 选择器', |
|||
title_en: 'Picker' |
|||
}, { |
|||
path: '/pages/componentsC/datetimePicker/datetimePicker', |
|||
icon: 'datetimePicker', |
|||
title: 'DatetimePicker 时间选择器', |
|||
title_en: 'Picker' |
|||
}, { |
|||
path: '/pages/componentsA/rate/rate', |
|||
icon: 'rate', |
|||
title: 'Rate 评分', |
|||
title_en: 'Rate' |
|||
}, { |
|||
path: '/pages/componentsB/search/search', |
|||
icon: 'search', |
|||
title: 'Search 搜索', |
|||
title_en: 'Search' |
|||
}, { |
|||
path: '/pages/componentsB/numberBox/numberBox', |
|||
icon: 'numberBox', |
|||
title: 'NumberBox 步进器', |
|||
title_en: 'NumberBox' |
|||
}, { |
|||
path: '/pages/componentsB/upload/upload', |
|||
icon: 'upload', |
|||
title: 'Upload 上传', |
|||
title_en: 'Upload' |
|||
}, { |
|||
path: '/pages/componentsB/code/code', |
|||
icon: 'code', |
|||
title: 'Code 验证码倒计时', |
|||
title_en: 'VerificationCode' |
|||
}, { |
|||
path: '/pages/componentsC/input/input', |
|||
icon: 'field', |
|||
title: 'Input 输入框', |
|||
title_en: 'Input' |
|||
}, { |
|||
path: '/pages/componentsC/textarea/textarea', |
|||
icon: 'textarea', |
|||
title: 'Textarea 文本域', |
|||
title_en: 'Textarea' |
|||
}, { |
|||
path: '/pages/componentsA/checkbox/checkbox', |
|||
icon: 'checkbox', |
|||
title: 'Checkbox 复选框', |
|||
title_en: 'Checkbox' |
|||
}, { |
|||
path: '/pages/componentsA/radio/radio', |
|||
icon: 'radio', |
|||
title: 'Radio 单选框', |
|||
title_en: 'Radio' |
|||
}, { |
|||
path: '/pages/componentsB/switch/switch', |
|||
icon: 'switch', |
|||
title: 'Switch 开关选择器', |
|||
title_en: 'Switch' |
|||
}, { |
|||
path: '/pages/componentsB/slider/slider', |
|||
icon: 'slider', |
|||
title: 'Slider 滑动选择器', |
|||
title_en: 'Slider' |
|||
}, { |
|||
path: '/pages/componentsC/album/album', |
|||
icon: 'album', |
|||
title: 'Album 相册', |
|||
title_en: 'Album' |
|||
}] |
|||
}, { |
|||
groupName: '数据组件', |
|||
groupName_en: 'Data components', |
|||
list: [{ |
|||
path: '/pages/componentsC/list/list', |
|||
icon: 'list', |
|||
title: 'List 列表', |
|||
title_en: 'List' |
|||
}, { |
|||
path: '/pages/componentsB/progress/progress', |
|||
icon: 'progress', |
|||
title: 'Progress 进度条', |
|||
title_en: 'Progress' |
|||
}, |
|||
// {
|
|||
// path: '/pages/componentsC/table/table',
|
|||
// icon: 'table',
|
|||
// title: 'Table 表格（暂无）',
|
|||
// title_en: 'Table',
|
|||
// },
|
|||
{ |
|||
path: '/pages/componentsB/countDown/countDown', |
|||
icon: 'countDown', |
|||
title: 'CountDown 倒计时', |
|||
title_en: 'CountDown' |
|||
}, { |
|||
path: '/pages/componentsB/countTo/countTo', |
|||
icon: 'countTo', |
|||
title: 'CountTo 数字滚动', |
|||
title_en: 'CountTo' |
|||
}] |
|||
}, { |
|||
groupName: '反馈组件', |
|||
groupName_en: 'Feedback components', |
|||
list: [{ |
|||
path: '/pages/componentsC/tooltip/tooltip', |
|||
icon: 'tooltip', |
|||
title: 'Tooltip 长按提示', |
|||
title_en: 'ActionSheet' |
|||
}, { |
|||
path: '/pages/componentsB/actionSheet/actionSheet', |
|||
icon: 'actionSheet', |
|||
title: 'ActionSheet 上拉菜单', |
|||
title_en: 'ActionSheet' |
|||
}, { |
|||
path: '/pages/componentsB/alert/alert', |
|||
icon: 'alert', |
|||
title: 'Alert 警告提示', |
|||
title_en: 'Alert' |
|||
}, { |
|||
path: '/pages/componentsB/toast/toast', |
|||
icon: 'toast', |
|||
title: 'Toast 消息提示', |
|||
title_en: 'Toast' |
|||
}, { |
|||
path: '/pages/componentsB/noticeBar/noticeBar', |
|||
icon: 'noticeBar', |
|||
title: 'NoticeBar 滚动通知', |
|||
title_en: 'NoticeBar' |
|||
}, { |
|||
path: '/pages/componentsB/notify/notify', |
|||
icon: 'notify', |
|||
title: 'Notify 消息提示', |
|||
title_en: 'Notify' |
|||
}, { |
|||
path: '/pages/componentsA/swipeAction/swipeAction', |
|||
icon: 'swipeAction', |
|||
title: 'SwipeAction 滑动单元格', |
|||
title_en: 'SwipeAction' |
|||
}, { |
|||
path: '/pages/componentsB/collapse/collapse', |
|||
icon: 'collapse', |
|||
title: 'Collapse 折叠面板', |
|||
title_en: 'Collapse' |
|||
}, { |
|||
path: '/pages/componentsA/popup/popup', |
|||
icon: 'popup', |
|||
title: 'Popup 弹出层', |
|||
title_en: 'Popup' |
|||
}, { |
|||
path: '/pages/componentsC/modal/modal', |
|||
icon: 'modal', |
|||
title: 'Modal 模态框', |
|||
title_en: 'Modal' |
|||
} |
|||
// {
|
|||
// path: '/pages/componentsA/fullScreen/fullScreen',
|
|||
// icon: 'pressingScreen',
|
|||
// title: 'fullScreen 压窗屏（暂无）',
|
|||
// title_en: 'fullScreen',
|
|||
// },
|
|||
] |
|||
}, { |
|||
groupName: '布局组件', |
|||
groupName_en: 'Layout components', |
|||
list: [{ |
|||
path: '/pages/componentsC/scrollList/scrollList', |
|||
icon: 'scrollList', |
|||
title: 'ScrollList 横向滚动列表', |
|||
title_en: 'ScrollList' |
|||
}, { |
|||
path: '/pages/componentsA/line/line', |
|||
icon: 'line', |
|||
title: 'Line 线条', |
|||
title_en: 'Line' |
|||
}, { |
|||
path: '/pages/componentsA/overlay/overlay', |
|||
icon: 'mask', |
|||
title: 'Overlay 遮罩层', |
|||
title_en: 'Overlay' |
|||
}, |
|||
// #ifndef MP-TOUTIAO
|
|||
{ |
|||
path: '/pages/componentsC/noNetwork/noNetwork', |
|||
icon: 'noNetwork', |
|||
title: 'NoNetwork 无网络提示', |
|||
title_en: 'NoNetwork' |
|||
}, |
|||
// #endif
|
|||
{ |
|||
path: '/pages/componentsA/grid/grid', |
|||
icon: 'grid', |
|||
title: 'Grid 宫格布局', |
|||
title_en: 'Grid' |
|||
}, { |
|||
path: '/pages/componentsC/swiper/swiper', |
|||
icon: 'swiper', |
|||
title: 'Swiper 轮播图', |
|||
title_en: 'Swiper' |
|||
}, { |
|||
path: '/pages/componentsC/skeleton/skeleton', |
|||
icon: 'skeleton', |
|||
title: 'Skeleton 骨架屏', |
|||
title_en: 'Skeleton' |
|||
}, { |
|||
path: '/pages/componentsA/sticky/sticky', |
|||
icon: 'sticky', |
|||
title: 'Sticky 吸顶', |
|||
title_en: 'Sticky' |
|||
}, |
|||
{ |
|||
path: '/pages/componentsA/divider/divider', |
|||
icon: 'divider', |
|||
title: 'Divider 分割线', |
|||
title_en: 'Divider' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
groupName: '导航组件', |
|||
groupName_en: 'Navigation components', |
|||
list: [ |
|||
// {
|
|||
// path: '/pages/componentsB/dropdown/dropdown',
|
|||
// icon: 'dropdown',
|
|||
// title: 'Dropdown 下拉菜单',
|
|||
// title_en: 'Dropdown',
|
|||
// },
|
|||
{ |
|||
path: '/pages/componentsB/tabbar/tabbar', |
|||
icon: 'tabbar', |
|||
title: 'Tabbar 底部导航栏', |
|||
title_en: 'Tabbar' |
|||
}, { |
|||
path: '/pages/componentsA/backtop/backtop', |
|||
icon: 'backTop', |
|||
title: 'BackTop 返回顶部', |
|||
title_en: 'BackTop' |
|||
}, { |
|||
path: '/pages/componentsC/navbar/navbar', |
|||
icon: 'navbar', |
|||
title: 'Navbar 导航栏', |
|||
title_en: 'Navbar' |
|||
}, { |
|||
path: '/pages/componentsC/tabs/tabs', |
|||
icon: 'tabs', |
|||
title: 'Tabs 标签', |
|||
title_en: 'Tabs' |
|||
}, |
|||
// // #ifndef MP-ALIPAY
|
|||
// {
|
|||
// path: '/pages/template/order/order',
|
|||
// icon: 'tabsSwiper',
|
|||
// title: 'TabsSwiper 全屏选项卡（暂无）',
|
|||
// title_en: 'TabsSwiper',
|
|||
// },
|
|||
// // #endif
|
|||
{ |
|||
path: '/pages/componentsC/subsection/subsection', |
|||
icon: 'subsection', |
|||
title: 'Subsection 分段器', |
|||
title_en: 'Subsection' |
|||
}, { |
|||
path: '/pages/componentsC/indexList/indexList', |
|||
icon: 'indexList', |
|||
title: 'IndexList 索引列表', |
|||
title_en: 'IndexList' |
|||
}, { |
|||
path: '/pages/componentsC/steps/steps', |
|||
icon: 'steps', |
|||
title: 'Steps 步骤条', |
|||
title_en: 'Steps' |
|||
}, { |
|||
path: '/pages/componentsA/empty/empty', |
|||
icon: 'empty', |
|||
title: 'Empty 内容为空', |
|||
title_en: 'Empty' |
|||
} |
|||
] |
|||
}, { |
|||
groupName: '其他组件', |
|||
groupName_en: 'Other components', |
|||
list: [{ |
|||
path: '/pages/componentsB/parse/parse', |
|||
icon: 'parse', |
|||
title: 'Parse 富文本解析器', |
|||
title_en: 'Parse' |
|||
}, { |
|||
path: '/pages/componentsC/codeInput/codeInput', |
|||
icon: 'messageInput', |
|||
title: 'CodeInput 验证码输入', |
|||
title_en: 'CodeInput' |
|||
}, |
|||
// {
|
|||
// path: '/pages/componentsC/avatarCropper/avatarCropper',
|
|||
// icon: 'avatarCropper',
|
|||
// title: 'AvatarCropper 头像裁剪（暂无）',
|
|||
// title_en: 'AvatarCropper',
|
|||
// },
|
|||
{ |
|||
path: '/pages/componentsC/loadmore/loadmore', |
|||
icon: 'loadmore', |
|||
title: 'Loadmore 加载更多', |
|||
title_en: 'Loadmore' |
|||
}, { |
|||
path: '/pages/componentsC/readMore/readMore', |
|||
icon: 'readMore', |
|||
title: 'ReadMore 展开阅读更多', |
|||
title_en: 'ReadMore' |
|||
}, |
|||
// {
|
|||
// path: '/pages/componentsA/lazyLoad/lazyLoad',
|
|||
// icon: 'lazyLoad',
|
|||
// title: 'LazyLoad 懒加载（暂无）',
|
|||
// title_en: 'LazyLoad',
|
|||
// },
|
|||
{ |
|||
path: '/pages/componentsA/gap/gap', |
|||
icon: 'gap', |
|||
title: 'Gap 间隔槽', |
|||
title_en: 'Gap' |
|||
}, { |
|||
path: '/pages/componentsC/avatar/avatar', |
|||
icon: 'avatar', |
|||
title: 'Avatar 头像', |
|||
title_en: 'Avatar' |
|||
}, { |
|||
path: '/pages/componentsA/link/link', |
|||
icon: 'link', |
|||
title: 'Link 超链接', |
|||
title_en: 'Link' |
|||
}, { |
|||
path: '/pages/componentsA/transition/transition', |
|||
icon: 'transition', |
|||
title: 'transition 动画', |
|||
title_en: '动画' |
|||
}] |
|||
} |
|||
] |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<page-nav :desc="desc"></page-nav> |
|||
<view class="list-wrap"> |
|||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="item.groupName" v-for="(item, index) in list" :key="index"> |
|||
<u-cell :titleStyle="{fontWeight: 500}" :title="item1.title" |
|||
v-for="(item1, index1) in item.list" :key="index1" isLink @click="openPage" :name="item1.path"> |
|||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image> |
|||
</u-cell> |
|||
</u-cell-group> |
|||
</view> |
|||
<u-gap height="30" bgColor="#fff"></u-gap> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import list from "./components.config.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: list, |
|||
desc: 'uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。', |
|||
} |
|||
}, |
|||
computed: { |
|||
getIcon() { |
|||
return path => { |
|||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png'; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
openPage(detail) { |
|||
const path = detail.name |
|||
// #ifdef APP-NVUE |
|||
// 目前安卓nvue下，由于overflow只能为hidden，所以布局上的原因，暂不支持steps和tooltip等组件 |
|||
if(uni.$u.os() === 'android') { |
|||
const noSupportForAndroid = ['steps', 'tooltip'] |
|||
for(let i = 0; i < noSupportForAndroid.length; i ++) { |
|||
if(path.indexOf(noSupportForAndroid[i]) > -1) { |
|||
return uni.$u.toast('安卓nvue下暂不支持此组件') |
|||
} |
|||
} |
|||
} |
|||
// #endif |
|||
uni.$u.route({ |
|||
url: path |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/* page { |
|||
background-color: rgb(240, 242, 244); |
|||
} */ |
|||
</style> |
|||
|
|||
<style lang="scss" > |
|||
|
|||
.u-cell-icon1 { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.u-cell-group__title__text { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<view class="root"> |
|||
<view class="uni-padding-wrap"> |
|||
<view class="uni-title">这是选项卡页面跳转详情页面的演示，下面是页面跳转时传递过来的标题：</view> |
|||
<view class="uni-title">{{title}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: '' |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.title = e.title || ''; |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,256 @@ |
|||
<template> |
|||
<!-- 审核详情（手机版） --> |
|||
<view class=""> |
|||
<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto"> |
|||
<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap"> |
|||
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text> |
|||
</view> |
|||
</scroll-view> |
|||
<swiper |
|||
:indicator-dots="true" |
|||
class="swiper box" |
|||
> |
|||
<swiper-item > |
|||
<view class="a"> |
|||
<view class="" > |
|||
<span class="crude">考核纬度 ： </span><span class="small">财务层面</span> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">考核项目 ： </span><span class="small">外部检查处罚</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item > |
|||
<view class="a"> |
|||
<view class="" > |
|||
<span class="crude">考核纬度 ： </span><span class="small">财务层面</span> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">考核项目 ： </span><span class="small">外部检查处罚</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item > |
|||
<view class="a"> |
|||
<view class="" > |
|||
<span class="crude">考核纬度 ： </span><span class="small">财务层面</span> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">考核项目 ： </span><span class="small">外部检查处罚</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
</swiper> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tabBars: [{ |
|||
name: '关注', |
|||
id: 'guanzhu' |
|||
}, { |
|||
name: '推荐', |
|||
id: 'tuijian' |
|||
}, { |
|||
name: '体育', |
|||
id: 'tiyu' |
|||
}, { |
|||
name: '热点', |
|||
id: 'redian' |
|||
}, { |
|||
name: '财经', |
|||
id: 'caijing' |
|||
}, { |
|||
name: '娱乐', |
|||
id: 'yule' |
|||
}, { |
|||
name: '军事', |
|||
id: 'junshi' |
|||
}, { |
|||
name: '历史', |
|||
id: 'lishi' |
|||
}, { |
|||
name: '本地', |
|||
id: 'bendi' |
|||
}], |
|||
indicator: true, |
|||
list: [{ |
|||
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg" |
|||
}, { |
|||
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg" |
|||
}, { |
|||
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg" |
|||
}, { |
|||
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg" |
|||
}, { |
|||
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg" |
|||
}], |
|||
swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'], |
|||
} |
|||
}, |
|||
created() { |
|||
this.getList() |
|||
}, |
|||
computed: { |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
uni.request({ |
|||
url: 'http://gin.vueadmin.net/api/noverify/lookdepartmentassessinfo', |
|||
method:"POST", |
|||
data: { |
|||
id: '16442990784043774' |
|||
}, |
|||
success: (res) => { |
|||
console.log(res.data); |
|||
if (res.code==0) { |
|||
} else{ |
|||
|
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
go(judge){ |
|||
uni.navigateTo({ |
|||
url: './connect?judge='+judge |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.a{ |
|||
margin-bottom: 5px; |
|||
} |
|||
.box{ |
|||
padding: 10px; |
|||
} |
|||
.small{ |
|||
font-size: 18px; |
|||
} |
|||
.crude{ |
|||
font-size: 22px; |
|||
font-weight:bold; |
|||
} |
|||
.swiper { |
|||
height: 1334rpx; |
|||
/* height: 780px; */ |
|||
/* height: 100%; */ |
|||
} |
|||
.paragraph { |
|||
text-indent: 2em; |
|||
/* height: 780px; */ |
|||
} |
|||
|
|||
.grid-text { |
|||
font-size: 14px; |
|||
color: #909399; |
|||
padding: 10rpx 0 20rpx 0rpx; |
|||
/* #ifndef APP-PLUS */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
} |
|||
.scroll-h { |
|||
width: 750rpx; |
|||
/* #ifdef H5 */ |
|||
width:100%; |
|||
/* #endif */ |
|||
height: 80rpx; |
|||
flex-direction: row; |
|||
/* #ifndef APP-PLUS */ |
|||
white-space: nowrap; |
|||
/* #endif */ |
|||
/* flex-wrap: nowrap; */ |
|||
/* border-color: #cccccc; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 1px; */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,294 @@ |
|||
<template> |
|||
<view class="page"> |
|||
<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag="true" :isEqually="false" @clickItem="onClickItem" @clickItem1="onClickItem1"></tabControl> |
|||
<!-- 使用 swiper 配合 滑动切换 --> |
|||
<!-- 使用 scroll-view 来滚动内容区域 --> |
|||
<!-- <swiper class="swiper" style="height: 100%;" @change="scollSwiper" :current="current"> |
|||
<swiper-item v-for="(item, index) in items" :key="index"> |
|||
|
|||
<scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view> |
|||
</swiper-item> |
|||
</swiper> --> |
|||
<swiper |
|||
:indicator-dots="true" |
|||
class="swiper box" |
|||
> |
|||
<swiper-item > |
|||
<view class="cardCss"> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</swiper-item> |
|||
|
|||
<swiper-item > |
|||
<view class="a"> |
|||
<view class="" > |
|||
<span class="crude">考核纬度 ： </span><span class="small">财务层面</span> |
|||
</view> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">考核项目 ： </span><span class="small">外部检查处罚</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small">日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。日月不肯迟，四时相催迫。”在这个属于奋斗者的新时代，人人都有追梦的权利，人人也都是梦想的筑造者。</p> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item > |
|||
<view class="a"> |
|||
<view class="" > |
|||
<span class="crude">考核纬度 ： </span><span class="small">财务层面</span> |
|||
</view> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">考核项目 ： </span><span class="small">外部检查处罚</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">具体职责 ： </span> |
|||
<p class="paragraph small">组织各部门配合做好工作分析、岗位设置的各类人才，制定并实施职业生涯计划</p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">参考分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分 ： </span><span class="small">10</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">加分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分 ： </span><span class="small">5</span> |
|||
</view> |
|||
<view class="a"> |
|||
<span class="crude">扣分原因 ： </span> |
|||
<p class="paragraph small"></p> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
</swiper> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import tabControl from '../index/tabControl-tag/tabControl-tag.vue'; |
|||
import tabControl from './tabControl-tag.vue'; |
|||
export default { |
|||
components: { tabControl }, |
|||
data() { |
|||
return { |
|||
// items: ['业绩统计', '选项卡2', '选项卡3', '选项卡4', '选项卡5'], |
|||
items: [ |
|||
{ |
|||
id:"123", |
|||
name:'组织培训' |
|||
}, |
|||
{ |
|||
id:"456", |
|||
name:'招聘管理' |
|||
}, |
|||
{ |
|||
id:"789", |
|||
name:'培训管理' |
|||
}, |
|||
{ |
|||
id:"126", |
|||
name:'薪酬管理' |
|||
}, |
|||
{ |
|||
id:"333", |
|||
name:'员工管理' |
|||
}, |
|||
], |
|||
current: 0 |
|||
}; |
|||
}, |
|||
onLoad() {}, |
|||
methods: { |
|||
onClickItem1(val) { |
|||
console.log("1") |
|||
console.log(val) |
|||
}, |
|||
onClickItem(val) { |
|||
this.current = val.currentIndex; |
|||
console.log(val) |
|||
}, |
|||
scollSwiper(e) { |
|||
this.current = e.target.current; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.cardCss{ |
|||
padding: 5px; |
|||
border-style:solid; |
|||
} |
|||
.contact-card { |
|||
background-color: #F7F8FA; |
|||
} |
|||
.contact-card_list { |
|||
position: relative; |
|||
padding: 26rpx; |
|||
margin: 20rpx 0; |
|||
background-color: #FFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.contact-card_info { |
|||
flex: 1; |
|||
|
|||
.contact-card_info-remarks { |
|||
color: #909399; |
|||
font-size: 80%; |
|||
} |
|||
} |
|||
|
|||
.contact-card_list-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.contact-card_add-icon { |
|||
width: 70rpx; |
|||
height: 70rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.contact-card_list::before { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
height: 2px; |
|||
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); |
|||
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%); |
|||
background-size: 80px; |
|||
content: ''; |
|||
} |
|||
|
|||
.card-icon { |
|||
display: inline-block; |
|||
width: 16px; |
|||
height: 16px; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 100%; |
|||
} |
|||
|
|||
.card-icon-right { |
|||
background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-you%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M731.7%20475.1L370.6%2080.8c-19.7-21.5-53-22.9-74.4-3.3-21.5%2019.7-22.9%2053-3.3%2074.4l328.6%20358.8-328.3%20359.8c-19.6%2021.5-18.1%2054.8%203.4%2074.4%2021.5%2019.6%2054.8%2018.1%2074.4-3.4l360.5-394.9c0.7-0.8%201.5-1.7%202.1-2.5%2016.4-19.9%2016.1-49.4-1.9-69z%22%20fill%3D%22%23999999%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E); |
|||
} |
|||
|
|||
.card-icon-contact { |
|||
background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-lianxiren%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M994.304%20949.76c-15.872-197.12-187.392-227.84-260.608-241.152-6.144-1.024-11.264-2.048-15.872-3.072-31.232-6.656-54.272-19.456-65.024-36.352-7.168-11.264-8.704-23.552-5.632-37.888%2010.24-43.008%2041.472-73.216%2071.168-102.4%2024.064-23.552%2047.104-46.08%2057.856-74.24%2018.432-48.128%2017.92-74.752-3.072-94.72-6.144-6.144-9.216-14.848-7.168-23.04%2018.432-78.336%207.68-143.36-32.256-194.048C655.36%2044.544%20493.568%2036.864%20445.952%2036.864c-41.984%200-81.408%204.608-108.544%2013.312-9.216%203.072-16.384%209.216-20.48%2017.408-4.096%208.192-5.12%2017.92-2.048%2026.624v0.512c3.584%209.728%200%2020.992-8.704%2027.136-57.344%2043.008-72.192%20111.104-48.128%20215.04%202.048%208.704-0.512%2017.408-7.168%2023.552-20.48%2019.968-21.504%2046.592-2.56%2094.72%2010.752%2028.16%2033.792%2050.176%2057.856%2074.24%2029.696%2029.184%2060.416%2059.392%2071.168%20102.4%203.584%2013.824%201.536%2026.624-5.632%2037.888-10.752%2016.896-33.792%2029.696-65.024%2036.352-4.608%201.024-9.728%202.048-15.872%203.072-73.728%2012.8-245.248%2043.52-261.12%20240.64-1.024%209.728%202.56%2019.456%209.216%2026.624%206.656%207.168%2015.872%2011.264%2025.6%2011.264h895.488c9.728%200%2018.944-4.096%2025.6-11.264%206.144-7.168%209.728-16.896%208.704-26.624zM81.92%20936.96c8.704-59.904%2036.352-103.936%2083.968-134.144%2045.568-28.672%20100.864-38.4%20134.144-44.544%206.144-1.024%2011.776-2.048%2016.384-3.072%2045.568-9.216%2079.36-29.696%2097.792-58.88%2014.336-22.528%2018.432-49.152%2011.776-76.8-13.824-56.832-51.712-94.208-84.48-126.464-19.968-19.968-39.424-38.4-46.08-56.32-8.704-23.04-10.24-33.28-9.728-37.888v-1.536c0-0.512%200.512-0.512%201.024-1.024%2019.456-18.944%2027.136-45.568%2020.992-71.68-25.088-106.496%202.56-142.848%2029.184-163.328%2021.504-15.872%2032.256-41.472%2029.696-67.584%2021.504-4.608%2050.176-7.168%2079.872-7.168%2086.528%200%20197.12%2023.04%20248.32%2087.552%2029.696%2037.888%2037.376%2088.576%2022.528%20151.04-6.144%2025.6%202.048%2052.736%2020.992%2071.168%200.512%200.512%200.512%200.512%201.024%200.512v1.536c0%204.096-1.024%2014.848-9.728%2037.888-6.656%2017.92-26.112%2036.352-46.08%2056.32-33.28%2032.768-70.656%2069.632-84.48%20126.464-6.656%2027.648-2.56%2053.76%2011.776%2076.8%2018.432%2029.184%2052.224%2049.152%2097.792%2058.88%205.12%201.024%2010.24%202.048%2016.896%203.072%2032.768%206.144%2087.552%2015.872%20133.632%2044.544%2048.128%2030.208%2075.264%2073.728%2083.968%20134.144H81.92z%22%20fill%3D%22%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E); |
|||
} |
|||
|
|||
.card-icon-add { |
|||
background: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%27100%25%27%20height%3D%27100%25%27%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22t-icon-xinzeng%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512%2042.666667c259.157333%200%20469.333333%20210.133333%20469.333333%20469.333333s-210.176%20469.333333-469.333333%20469.333333S42.666667%20771.2%2042.666667%20512%20252.842667%2042.666667%20512%2042.666667z%20m4.266667%20234.666666h-8.533334a42.666667%2042.666667%200%200%200-42.666666%2042.666667l-0.042667%20145.066667H320a42.666667%2042.666667%200%200%200-42.666667%2042.666666v8.533334a42.666667%2042.666667%200%200%200%2042.666667%2042.666666h145.024l0.042667%20145.066667a42.666667%2042.666667%200%200%200%2042.666666%2042.666667h8.533334a42.666667%2042.666667%200%200%200%2042.666666-42.666667l-0.042666-145.066667H704a42.666667%2042.666667%200%200%200%2042.666667-42.666666v-8.533334a42.666667%2042.666667%200%200%200-42.666667-42.666666h-145.109333l0.042666-145.066667a42.666667%2042.666667%200%200%200-42.666666-42.666667z%22%20fill%3D%22%231989FA%22%20%3E%3C%2Fpath%3E%3C%2Fsvg%3E); |
|||
} |
|||
page { |
|||
height: 100%; |
|||
} |
|||
.page { |
|||
padding-top: 98rpx; |
|||
height: 100%; |
|||
} |
|||
.a{ |
|||
margin-bottom: 5px; |
|||
} |
|||
.box{ |
|||
padding: 10px; |
|||
} |
|||
.small{ |
|||
font-size: 15px; |
|||
} |
|||
.crude{ |
|||
font-size: 18px; |
|||
font-weight:bold; |
|||
} |
|||
.swiper { |
|||
height: 1334rpx; |
|||
/* height: 780px; */ |
|||
/* height: 100%; */ |
|||
} |
|||
.paragraph { |
|||
text-indent: 2em; |
|||
/* height: 780px; */ |
|||
} |
|||
|
|||
.grid-text { |
|||
font-size: 14px; |
|||
color: #909399; |
|||
padding: 10rpx 0 20rpx 0rpx; |
|||
/* #ifndef APP-PLUS */ |
|||
box-sizing: border-box; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.scroll-h { |
|||
width: 750rpx; |
|||
/* #ifdef H5 */ |
|||
width:100%; |
|||
/* #endif */ |
|||
height: 80rpx; |
|||
flex-direction: row; |
|||
/* #ifndef APP-PLUS */ |
|||
white-space: nowrap; |
|||
/* #endif */ |
|||
/* flex-wrap: nowrap; */ |
|||
/* border-color: #cccccc; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 1px; */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<!-- remove list-cell layer fix android 4.x overflow limit error: 28 layers! --> |
|||
<!-- <view class="list-cell view" @click="click"></view> --> |
|||
<view class="media-item view" hover-class="media-item-hover" v-if="options.title" @click="click"> |
|||
<!-- <view class="view" :style="options.article_type === 2 ? 'flex-direction: row';" :class="{'media-image-right': options.article_type === 2, 'media-image-left': options.article_type === 1}"> --> |
|||
<!-- TODO 在支付宝小程序下 需要用 style 覆盖标签的默认样式 --> |
|||
<view class="view" :style="{flexDirection: (options.article_type === 1 || options.article_type === 2)?(options.article_type === 2 ?'row':'row-reverse'):'column' }"> |
|||
<text class="media-title" :class="{'media-title2': options.article_type === 1 || options.article_type === 2}">{{options.title}}</text> |
|||
<view v-if="options.image_list || options.image_url" class="image-section flex-row" :class="{'image-section-right': options.article_type === 2, 'image-section-left': options.article_type === 1}" |
|||
:style="{flexDirection: 'row' }"> |
|||
<image class="image-list1" :class="{'image-list2': options.article_type === 1 || options.article_type === 2}" v-if="options.image_url" |
|||
:src="options.image_url"></image> |
|||
<image class="image-list3" v-if="options.image_list" :src="source.url" v-for="(source, i) in options.image_list" |
|||
:key="i" /> |
|||
</view> |
|||
</view> |
|||
<view class="media-foot flex-row" style="flex-direction: row;"> |
|||
<view class="media-info flex-row" style="flex-direction: row;"> |
|||
<text class="info-text">{{options.source}}</text> |
|||
<text class="info-text">{{options.comment_count}}条评论</text> |
|||
<text class="info-text">{{options.datetime}}</text> |
|||
</view> |
|||
<view class="max-close-view" @click.stop="close"> |
|||
<view class="close-l close-h"></view> |
|||
<view class="close-l close-v"></view> |
|||
</view> |
|||
</view> |
|||
<view class="media-item-line" style="position: absolute;"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
options: { |
|||
type: Object, |
|||
default: function(e) { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
click() { |
|||
this.$emit('click'); |
|||
}, |
|||
close(e) { |
|||
this.$emit('close'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.view { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-row { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.flex-col { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.list-cell { |
|||
width: 750rpx; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.uni-list-cell-hover { |
|||
background-color: #eeeeee; |
|||
} |
|||
|
|||
.media-item { |
|||
position: relative; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
/* border-bottom-width: 1rpx; |
|||
border-bottom-style: solid; |
|||
border-bottom-color: #ebebeb; */ |
|||
padding: 20rpx 30rpx 21rpx 30rpx; |
|||
} |
|||
|
|||
.media-item-hover{ |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.media-item-line { |
|||
position: absolute; |
|||
left: 30rpx; |
|||
right: 30rpx; |
|||
bottom: 0; |
|||
height: 1rpx; |
|||
background-color: #ebebeb; |
|||
} |
|||
|
|||
.media-image-right { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.media-image-left { |
|||
flex-direction: row-reverse; |
|||
} |
|||
|
|||
.media-title { |
|||
flex: 1; |
|||
} |
|||
|
|||
.media-title { |
|||
lines: 3; |
|||
text-overflow: ellipsis; |
|||
font-size: 30rpx; |
|||
color: #555555; |
|||
} |
|||
|
|||
.media-title2 { |
|||
flex: 1; |
|||
margin-top: 6rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.image-section { |
|||
margin-top: 20rpx; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.image-section-right { |
|||
margin-top: 0rpx; |
|||
margin-left: 10rpx; |
|||
width: 225rpx; |
|||
height: 146rpx; |
|||
} |
|||
|
|||
.image-section-left { |
|||
margin-top: 0rpx; |
|||
margin-right: 10rpx; |
|||
width: 225rpx; |
|||
height: 146rpx; |
|||
} |
|||
|
|||
.image-list1 { |
|||
width: 690rpx; |
|||
height: 481rpx; |
|||
} |
|||
|
|||
.image-list2 { |
|||
width: 225rpx; |
|||
height: 146rpx; |
|||
} |
|||
|
|||
.image-list3 { |
|||
width: 225rpx; |
|||
/* #ifdef H5 */ |
|||
width: 30%; |
|||
/* #endif */ |
|||
height: 146rpx; |
|||
/* #ifdef H5 */ |
|||
height: 146px; |
|||
/* #endif */ |
|||
} |
|||
|
|||
.media-info { |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.info-text { |
|||
margin-right: 20rpx; |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.media-foot { |
|||
margin-top: 25rpx; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.max-close-view { |
|||
position: relative; |
|||
align-items: center; |
|||
flex-direction: row; |
|||
width: 40rpx; |
|||
height: 30rpx; |
|||
line-height: 30rpx; |
|||
border-width: 1rpx; |
|||
border-style: solid; |
|||
border-color: #aaaaaa; |
|||
border-radius: 4px; |
|||
justify-content: center; |
|||
text-align: center; |
|||
} |
|||
|
|||
.close-l { |
|||
position: absolute; |
|||
width: 18rpx; |
|||
height: 1rpx; |
|||
background-color: #aaaaaa; |
|||
} |
|||
|
|||
.close-h { |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.close-v { |
|||
transform: rotate(-45deg); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
<template name="tabControl"> |
|||
<scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation id="tabcard"> |
|||
<view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''"> |
|||
<view |
|||
:class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')" |
|||
:style="isEqually? 'width:'+windowWidth/values.length+'px;margin-right:0;':''" |
|||
v-for="(item,index) in values" |
|||
:id="'item'+index" |
|||
:key='index' |
|||
@click="_onClick(index,item)"> |
|||
<text :style="(currentIndex==index?'font-size:'+activeSize+'rpx;color:'+activeColor:'font-size:'+itemSize+'rpx')">{{item.name}}</text> |
|||
<view class="activeLine" :style="{width: lineWidth+'rpx'}"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name:'tabControl', |
|||
props:{ |
|||
current: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
values: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
bgc:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
fixed:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
scrollFlag:{ |
|||
type:Boolean, |
|||
default:false |
|||
}, |
|||
lineWidth:{ |
|||
type:Number, |
|||
default: 100 |
|||
}, |
|||
itemSize:{ |
|||
type:Number, |
|||
default: 30 |
|||
}, |
|||
activeSize:{ |
|||
type:Number, |
|||
default: 32 |
|||
}, |
|||
activeColor:{ |
|||
type:String, |
|||
default:'' |
|||
}, |
|||
top:{ |
|||
type:Number, |
|||
default: 0 |
|||
}, |
|||
isEqually:{ |
|||
type:Boolean, |
|||
default:false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
currentIndex: 0, |
|||
windowWidth:0, //设备宽度 |
|||
leftList:[], //选项距离左边的距离 |
|||
widthList:[], //选项宽度 |
|||
scrollLeft:0, //移动距离 |
|||
newScroll:0, //上一次移动距离(用来判断是左滑还是右滑) |
|||
wornScroll:0, //上一次移动距离(用来判断是左滑还是右滑) |
|||
}; |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
mounted(){ |
|||
setTimeout(()=>{ |
|||
uni.createSelectorQuery().in(this).select("#tabcard").boundingClientRect((res)=>{ |
|||
this.$emit('getTabCardHeight', {height:res.height}) |
|||
}).exec() |
|||
uni.getSystemInfo({ |
|||
success: (res)=> { |
|||
this.windowWidth = res.windowWidth; |
|||
// console.log(this.windowWidth); |
|||
this.values.forEach((i,v)=>{ |
|||
let info = uni.createSelectorQuery().in(this); |
|||
info.select("#item"+v).boundingClientRect((res)=>{ |
|||
// 获取第一个元素到左边的距离 |
|||
// if(v==0){ |
|||
// this.startLenght = res.left |
|||
// } |
|||
this.widthList.push(res.width) |
|||
this.leftList.push(res.left) |
|||
|
|||
}).exec() |
|||
|
|||
}) |
|||
// console.log(this.leftList) |
|||
// console.log(this.widthList) |
|||
} |
|||
}); |
|||
}) |
|||
}, |
|||
created() { |
|||
this.currentIndex = this.current |
|||
if(this.scrollFlag){ |
|||
setTimeout(()=>{ |
|||
this.tabListScroll(this.current) |
|||
},300) |
|||
} |
|||
}, |
|||
watch: { |
|||
current(val) { |
|||
if (val !== this.currentIndex) { |
|||
this.currentIndex = val |
|||
if(this.scrollFlag){ |
|||
this.tabListScroll(val) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
methods: { |
|||
_onClick(index,itam) { |
|||
if (this.currentIndex !== index) { |
|||
this.currentIndex = index |
|||
this.$emit('clickItem', {currentIndex:index}) |
|||
this.$emit('clickItem1', itam) |
|||
// 开启滚动 |
|||
if(this.scrollFlag){ |
|||
this.tabListScroll(index) |
|||
} |
|||
} |
|||
}, |
|||
// 选项移动 |
|||
tabListScroll(index){ |
|||
let scoll = 0; |
|||
this.wornScroll = index; |
|||
// this.wornScroll-this.newScroll>0 在向左滑 ←←←←← |
|||
if(this.wornScroll-this.newScroll>0){ |
|||
for(let i = 0;i<this.leftList.length;i++){ |
|||
if(i>1&&i==this.currentIndex){ |
|||
scoll = this.leftList[i-1] |
|||
} |
|||
} |
|||
// console.log('在向左滑',scoll) |
|||
}else{ |
|||
if(index>1){ |
|||
for(let i = 0;i<this.leftList.length;i++){ |
|||
if(i<index-1){ |
|||
scoll = this.leftList[i] |
|||
} |
|||
} |
|||
}else{ |
|||
scoll = 0 |
|||
} |
|||
// console.log('在向右滑') |
|||
} |
|||
this.newScroll = this.wornScroll; |
|||
this.scrollLeft = scoll; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.fxied{ |
|||
position: fixed; |
|||
z-index: 2; |
|||
} |
|||
.tabList{ |
|||
padding-top: 24rpx; |
|||
padding-left: 24rpx; |
|||
padding-bottom: 8rpx; |
|||
white-space: nowrap; |
|||
text-align: center; |
|||
.tabItem{ |
|||
margin-right: 60rpx; |
|||
display: inline-block; |
|||
position: relative; |
|||
text{ |
|||
// font-size: 30rpx; |
|||
line-height: 44rpx; |
|||
color: #666; |
|||
transition: all 0.3s ease 0s; |
|||
} |
|||
.activeLine{ |
|||
// width: 48rpx; |
|||
height: 8rpx; |
|||
border-radius: 4rpx; |
|||
background-color: #F57341; |
|||
margin-top: 8rpx; |
|||
margin-left: 50%; |
|||
transform: translateX(-50%); |
|||
opacity: 0; |
|||
transition: all 0.3s ease 0s; |
|||
} |
|||
} |
|||
.tabItem:first-child{ |
|||
// margin-left: 22rpx; |
|||
} |
|||
.tabItem:last-child{ |
|||
margin-right: 24rpx; |
|||
} |
|||
.thisOpenSelect{ |
|||
text{ |
|||
color: #333; |
|||
font-weight:600; |
|||
// font-size: 32rpx; |
|||
} |
|||
.activeLine{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,224 @@ |
|||
'use strict' |
|||
|
|||
// 等待初始化完毕
|
|||
document.addEventListener('UniAppJSBridgeReady', () => { |
|||
document.body.onclick = function () { |
|||
return uni.postMessage({ |
|||
data: { |
|||
action: 'onClick' |
|||
} |
|||
}) |
|||
} |
|||
|
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onJSBridgeReady' |
|||
} |
|||
}) |
|||
}) |
|||
let options |
|||
let medias = [] |
|||
/** |
|||
* @description 获取标签的所有属性 |
|||
* @param {Element} ele |
|||
*/ |
|||
|
|||
function getAttrs(ele) { |
|||
const attrs = Object.create(null) |
|||
|
|||
for (let i = ele.attributes.length; i--;) { |
|||
attrs[ele.attributes[i].name] = ele.attributes[i].value |
|||
} |
|||
|
|||
return attrs |
|||
} |
|||
/** |
|||
* @description 图片加载出错 |
|||
*/ |
|||
|
|||
function onImgError() { |
|||
if (options[1]) { |
|||
this.src = options[1] |
|||
this.onerror = null |
|||
} // 取消监听点击
|
|||
|
|||
this.onclick = null |
|||
this.ontouchstart = null |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onError', |
|||
source: 'img', |
|||
attrs: getAttrs(this) |
|||
} |
|||
}) |
|||
} |
|||
/** |
|||
* @description 创建 dom 结构 |
|||
* @param {object[]} nodes 节点数组 |
|||
* @param {Element} parent 父节点 |
|||
* @param {string} namespace 命名空间 |
|||
*/ |
|||
|
|||
function createDom(nodes, parent, namespace) { |
|||
const _loop = function _loop(i) { |
|||
const node = nodes[i] |
|||
let ele = void 0 |
|||
|
|||
if (!node.type || node.type == 'node') { |
|||
let { name } = node // svg 需要设置 namespace
|
|||
|
|||
if (name == 'svg') namespace = 'http://www.w3.org/2000/svg' |
|||
if (name == 'html' || name == 'body') name = 'div' // 创建标签
|
|||
|
|||
if (!namespace) ele = document.createElement(name); else ele = document.createElementNS(namespace, name) // 设置属性
|
|||
|
|||
for (const item in node.attrs) { |
|||
ele.setAttribute(item, node.attrs[item]) |
|||
} // 递归创建子节点
|
|||
|
|||
if (node.children) createDom(node.children, ele, namespace) // 处理图片
|
|||
|
|||
if (name == 'img') { |
|||
if (!ele.src && ele.getAttribute('data-src')) ele.src = ele.getAttribute('data-src') |
|||
|
|||
if (!node.attrs.ignore) { |
|||
// 监听图片点击事件
|
|||
ele.onclick = function (e) { |
|||
e.stopPropagation() |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onImgTap', |
|||
attrs: getAttrs(this) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
if (options[2]) { |
|||
image = new Image() |
|||
image.src = ele.src |
|||
ele.src = options[2] |
|||
|
|||
image.onload = function () { |
|||
ele.src = this.src |
|||
} |
|||
|
|||
image.onerror = function () { |
|||
ele.onerror() |
|||
} |
|||
} |
|||
|
|||
ele.onerror = onImgError |
|||
} // 处理链接
|
|||
else if (name == 'a') { |
|||
ele.addEventListener('click', function (e) { |
|||
e.stopPropagation() |
|||
e.preventDefault() // 阻止默认跳转
|
|||
|
|||
const href = this.getAttribute('href') |
|||
let offset |
|||
if (href && href[0] == '#') offset = (document.getElementById(href.substr(1)) || {}).offsetTop |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onLinkTap', |
|||
attrs: getAttrs(this), |
|||
offset |
|||
} |
|||
}) |
|||
}, true) |
|||
} // 处理音视频
|
|||
else if (name == 'video' || name == 'audio') { |
|||
medias.push(ele) |
|||
|
|||
if (!node.attrs.autoplay) { |
|||
if (!node.attrs.controls) ele.setAttribute('controls', 'true') // 空白图占位
|
|||
|
|||
if (!node.attrs.poster) ele.setAttribute('poster', "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>") |
|||
} |
|||
|
|||
if (options[3]) { |
|||
ele.onplay = function () { |
|||
for (let _i = 0; _i < medias.length; _i++) { |
|||
if (medias[_i] != this) medias[_i].pause() |
|||
} |
|||
} |
|||
} |
|||
|
|||
ele.onerror = function () { |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onError', |
|||
source: name, |
|||
attrs: getAttrs(this) |
|||
} |
|||
}) |
|||
} |
|||
} // 处理表格
|
|||
else if (name == 'table' && options[4] && !ele.style.cssText.includes('inline')) { |
|||
const div = document.createElement('div') |
|||
div.style.overflow = 'auto' |
|||
div.appendChild(ele) |
|||
ele = div |
|||
} else if (name == 'svg') namespace = void 0 |
|||
} else ele = document.createTextNode(node.text.replace(/&/g, '&')) |
|||
|
|||
parent.appendChild(ele) |
|||
} |
|||
|
|||
for (let i = 0; i < nodes.length; i++) { |
|||
var image |
|||
|
|||
_loop(i) |
|||
} |
|||
} // 设置 html 内容
|
|||
|
|||
window.setContent = function (nodes, opts, append) { |
|||
const ele = document.getElementById('content') // 背景颜色
|
|||
|
|||
if (opts[0]) document.body.bgColor = opts[0] // 长按复制
|
|||
|
|||
if (!opts[5]) ele.style.userSelect = 'none' |
|||
|
|||
if (!append) { |
|||
ele.innerHTML = '' // 不追加则先清空
|
|||
|
|||
medias = [] |
|||
} |
|||
|
|||
options = opts |
|||
const fragment = document.createDocumentFragment() |
|||
createDom(nodes, fragment) |
|||
ele.appendChild(fragment) // 触发事件
|
|||
|
|||
let height = ele.scrollHeight |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onLoad', |
|||
height |
|||
} |
|||
}) |
|||
clearInterval(window.timer) |
|||
let ready = false |
|||
window.timer = setInterval(() => { |
|||
if (ele.scrollHeight != height) { |
|||
height = ele.scrollHeight |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onHeightChange', |
|||
height |
|||
} |
|||
}) |
|||
} else if (!ready) { |
|||
ready = true |
|||
uni.postMessage({ |
|||
data: { |
|||
action: 'onReady' |
|||
} |
|||
}) |
|||
} |
|||
}, 350) |
|||
} // 回收计时器
|
|||
|
|||
window.onunload = function () { |
|||
clearInterval(window.timer) |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
!(function (e, n) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = n() : typeof define === 'function' && define.amd ? define(n) : (e = e || self).uni = n() }(this, (() => { |
|||
'use strict' |
|||
|
|||
try { const e = {}; Object.defineProperty(e, 'passive', { get() { !0 } }), window.addEventListener('test-passive', null, e) } catch (e) {} const n = Object.prototype.hasOwnProperty; function t(e, t) { return n.call(e, t) } const i = []; const a = function (e, n) { const t = { options: { timestamp: +new Date() }, name: e, arg: n }; if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) { if (e === 'postMessage') { const a = { data: [n] }; return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window.__dcloud_weex_.postMessage(JSON.stringify(a)) } const o = { type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }; window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(JSON.stringify(o)) } if (!window.plus) return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' }, '*'); if (i.length === 0) { const r = plus.webview.currentWebview(); if (!r) throw new Error('plus.webview.currentWebview() is undefined'); const d = r.parent(); let s = ''; s = d ? d.id : r.id, i.push(s) } if (plus.webview.getWebviewById('__uniapp__service'))plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }, '__uniapp__service'); else { const w = JSON.stringify(t); plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(w, ',').concat(JSON.stringify(i), ');')) } }; const o = { |
|||
navigateTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('navigateTo', { url: encodeURI(n) }) }, navigateBack() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.delta; a('navigateBack', { delta: parseInt(n) || 1 }) }, switchTab() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('switchTab', { url: encodeURI(n) }) }, reLaunch() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('reLaunch', { url: encodeURI(n) }) }, redirectTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('redirectTo', { url: encodeURI(n) }) }, getEnv(e) { window.plus ? e({ plus: !0 }) : e({ h5: !0 }) }, postMessage() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; a('postMessage', e.data || {}) } |
|||
}; const r = /uni-app/i.test(navigator.userAgent); const d = /Html5Plus/i.test(navigator.userAgent); const s = /complete|loaded|interactive/; const w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1; const u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent); const c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent); const v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const p = window.qa && /quickapp/i.test(navigator.userAgent); for (var l, _ = function () { window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', { bubbles: !0, cancelable: !0 })) }, f = [function (e) { if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener('DOMContentLoaded', e) : window.plus && s.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener('plusready', e), o }, function (e) { if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('WeixinJSBridgeReady', e), window.wx.miniProgram }, function (e) { if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QQJSBridgeReady', e), window.qq.miniProgram }, function (e) { |
|||
if (w) { |
|||
document.addEventListener('DOMContentLoaded', e); const n = window.my; return { |
|||
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv |
|||
} |
|||
} |
|||
}, function (e) { if (u) return document.addEventListener('DOMContentLoaded', e), window.swan.webView }, function (e) { if (g) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram }, function (e) { |
|||
if (p) { |
|||
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QaJSBridgeReady', e); const n = window.qa; return { |
|||
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv |
|||
} |
|||
} |
|||
}, function (e) { return document.addEventListener('DOMContentLoaded', e), o }], m = 0; m < f.length && !(l = f[m](_)); m++);l || (l = {}); const E = typeof uni !== 'undefined' ? uni : {}; if (!E.navigateTo) for (const b in l)t(l, b) && (E[b] = l[b]); return E.webView = l, E |
|||
}))) |
|||
@ -0,0 +1 @@ |
|||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}@keyframes show{0%{opacity:0}100%{opacity:1}}</style></head><body><div id="content"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body> |
|||
@ -0,0 +1,363 @@ |
|||
(function (window, document, exportName, undefined) { |
|||
"use strict"; |
|||
|
|||
var isMultiTouch = false; |
|||
var multiTouchStartPos; |
|||
var eventTarget; |
|||
var touchElements = {}; |
|||
|
|||
// polyfills
|
|||
if (!document.createTouch) { |
|||
document.createTouch = function (view, target, identifier, pageX, pageY, screenX, screenY, clientX, clientY) { |
|||
// auto set
|
|||
if (clientX == undefined || clientY == undefined) { |
|||
clientX = pageX - window.pageXOffset; |
|||
clientY = pageY - window.pageYOffset; |
|||
} |
|||
|
|||
return new Touch(target, identifier, { |
|||
pageX: pageX, |
|||
pageY: pageY, |
|||
screenX: screenX, |
|||
screenY: screenY, |
|||
clientX: clientX, |
|||
clientY: clientY |
|||
}); |
|||
}; |
|||
} |
|||
|
|||
if (!document.createTouchList) { |
|||
document.createTouchList = function () { |
|||
var touchList = new TouchList(); |
|||
for (var i = 0; i < arguments.length; i++) { |
|||
touchList[i] = arguments[i]; |
|||
} |
|||
touchList.length = arguments.length; |
|||
return touchList; |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* create an touch point |
|||
* @constructor |
|||
* @param target |
|||
* @param identifier |
|||
* @param pos |
|||
* @param deltaX |
|||
* @param deltaY |
|||
* @returns {Object} touchPoint |
|||
*/ |
|||
function Touch(target, identifier, pos, deltaX, deltaY) { |
|||
deltaX = deltaX || 0; |
|||
deltaY = deltaY || 0; |
|||
|
|||
this.identifier = identifier; |
|||
this.target = target; |
|||
this.clientX = pos.clientX + deltaX; |
|||
this.clientY = pos.clientY + deltaY; |
|||
this.screenX = pos.screenX + deltaX; |
|||
this.screenY = pos.screenY + deltaY; |
|||
this.pageX = pos.pageX + deltaX; |
|||
this.pageY = pos.pageY + deltaY; |
|||
} |
|||
|
|||
/** |
|||
* create empty touchlist with the methods |
|||
* @constructor |
|||
* @returns touchList |
|||
*/ |
|||
function TouchList() { |
|||
var touchList = []; |
|||
|
|||
touchList.item = function (index) { |
|||
return this[index] || null; |
|||
}; |
|||
|
|||
// specified by Mozilla
|
|||
touchList.identifiedTouch = function (id) { |
|||
return this[id + 1] || null; |
|||
}; |
|||
|
|||
return touchList; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* Simple trick to fake touch event support |
|||
* this is enough for most libraries like Modernizr and Hammer |
|||
*/ |
|||
function fakeTouchSupport() { |
|||
var objs = [window, document.documentElement]; |
|||
var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend']; |
|||
|
|||
for (var o = 0; o < objs.length; o++) { |
|||
for (var p = 0; p < props.length; p++) { |
|||
if (objs[o] && objs[o][props[p]] == undefined) { |
|||
objs[o][props[p]] = null; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* we don't have to emulate on a touch device |
|||
* @returns {boolean} |
|||
*/ |
|||
function hasTouchSupport() { |
|||
return ("ontouchstart" in window) || // touch events
|
|||
(window.Modernizr && window.Modernizr.touch) || // modernizr
|
|||
(navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2; // pointer events
|
|||
} |
|||
|
|||
/** |
|||
* disable mouseevents on the page |
|||
* @param ev |
|||
*/ |
|||
function preventMouseEvents(ev) { |
|||
// 注释启用默认事件
|
|||
// ev.preventDefault();
|
|||
// ev.stopPropagation();
|
|||
} |
|||
|
|||
/** |
|||
* only trigger touches when the left mousebutton has been pressed |
|||
* @param touchType |
|||
* @returns {Function} |
|||
*/ |
|||
function onMouse(touchType) { |
|||
return function (ev) { |
|||
// prevent mouse events
|
|||
preventMouseEvents(ev); |
|||
|
|||
if (ev.which !== 1) { |
|||
return; |
|||
} |
|||
|
|||
// The EventTarget on which the touch point started when it was first placed on the surface,
|
|||
// even if the touch point has since moved outside the interactive area of that element.
|
|||
// also, when the target doesnt exist anymore, we update it
|
|||
if (ev.type == 'mousedown' || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)) { |
|||
eventTarget = ev.target; |
|||
} |
|||
|
|||
// shiftKey has been lost, so trigger a touchend
|
|||
if (isMultiTouch && !ev.shiftKey) { |
|||
triggerTouch('touchend', ev); |
|||
isMultiTouch = false; |
|||
} |
|||
|
|||
triggerTouch(touchType, ev); |
|||
|
|||
// we're entering the multi-touch mode!
|
|||
if (!isMultiTouch && ev.shiftKey) { |
|||
isMultiTouch = true; |
|||
multiTouchStartPos = { |
|||
pageX: ev.pageX, |
|||
pageY: ev.pageY, |
|||
clientX: ev.clientX, |
|||
clientY: ev.clientY, |
|||
screenX: ev.screenX, |
|||
screenY: ev.screenY |
|||
}; |
|||
triggerTouch('touchstart', ev); |
|||
} |
|||
|
|||
// reset
|
|||
if (ev.type == 'mouseup') { |
|||
multiTouchStartPos = null; |
|||
isMultiTouch = false; |
|||
eventTarget = null; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* trigger a touch event |
|||
* @param eventName |
|||
* @param mouseEv |
|||
*/ |
|||
function triggerTouch(eventName, mouseEv) { |
|||
var touchEvent = document.createEvent('Event'); |
|||
touchEvent.initEvent(eventName, true, true); |
|||
|
|||
touchEvent.altKey = mouseEv.altKey; |
|||
touchEvent.ctrlKey = mouseEv.ctrlKey; |
|||
touchEvent.metaKey = mouseEv.metaKey; |
|||
touchEvent.shiftKey = mouseEv.shiftKey; |
|||
|
|||
touchEvent.touches = getActiveTouches(mouseEv, eventName); |
|||
touchEvent.targetTouches = getActiveTouches(mouseEv, eventName); |
|||
touchEvent.changedTouches = getChangedTouches(mouseEv, eventName); |
|||
|
|||
eventTarget.dispatchEvent(touchEvent); |
|||
} |
|||
|
|||
/** |
|||
* create a touchList based on the mouse event |
|||
* @param mouseEv |
|||
* @returns {TouchList} |
|||
*/ |
|||
function createTouchList(mouseEv) { |
|||
var touchList = new TouchList(); |
|||
|
|||
if (isMultiTouch) { |
|||
var f = TouchEmulator.multiTouchOffset; |
|||
var deltaX = multiTouchStartPos.pageX - mouseEv.pageX; |
|||
var deltaY = multiTouchStartPos.pageY - mouseEv.pageY; |
|||
|
|||
touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX * -1) - f, (deltaY * -1) + f)); |
|||
touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX + f, deltaY - f)); |
|||
} else { |
|||
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0)); |
|||
} |
|||
|
|||
return touchList; |
|||
} |
|||
|
|||
/** |
|||
* receive all active touches |
|||
* @param mouseEv |
|||
* @returns {TouchList} |
|||
*/ |
|||
function getActiveTouches(mouseEv, eventName) { |
|||
// empty list
|
|||
if (mouseEv.type == 'mouseup') { |
|||
return new TouchList(); |
|||
} |
|||
|
|||
var touchList = createTouchList(mouseEv); |
|||
if (isMultiTouch && mouseEv.type != 'mouseup' && eventName == 'touchend') { |
|||
touchList.splice(1, 1); |
|||
} |
|||
return touchList; |
|||
} |
|||
|
|||
/** |
|||
* receive a filtered set of touches with only the changed pointers |
|||
* @param mouseEv |
|||
* @param eventName |
|||
* @returns {TouchList} |
|||
*/ |
|||
function getChangedTouches(mouseEv, eventName) { |
|||
var touchList = createTouchList(mouseEv); |
|||
|
|||
// we only want to return the added/removed item on multitouch
|
|||
// which is the second pointer, so remove the first pointer from the touchList
|
|||
//
|
|||
// but when the mouseEv.type is mouseup, we want to send all touches because then
|
|||
// no new input will be possible
|
|||
if (isMultiTouch && mouseEv.type != 'mouseup' && |
|||
(eventName == 'touchstart' || eventName == 'touchend')) { |
|||
touchList.splice(0, 1); |
|||
} |
|||
|
|||
return touchList; |
|||
} |
|||
|
|||
/** |
|||
* show the touchpoints on the screen |
|||
*/ |
|||
function showTouches(ev) { |
|||
var touch, i, el, styles; |
|||
|
|||
// first all visible touches
|
|||
for (i = 0; i < ev.touches.length; i++) { |
|||
touch = ev.touches[i]; |
|||
el = touchElements[touch.identifier]; |
|||
if (!el) { |
|||
el = touchElements[touch.identifier] = document.createElement("div"); |
|||
document.body.appendChild(el); |
|||
} |
|||
|
|||
styles = TouchEmulator.template(touch); |
|||
for (var prop in styles) { |
|||
el.style[prop] = styles[prop]; |
|||
} |
|||
} |
|||
|
|||
// remove all ended touches
|
|||
if (ev.type == 'touchend' || ev.type == 'touchcancel') { |
|||
for (i = 0; i < ev.changedTouches.length; i++) { |
|||
touch = ev.changedTouches[i]; |
|||
el = touchElements[touch.identifier]; |
|||
if (el) { |
|||
el.parentNode.removeChild(el); |
|||
delete touchElements[touch.identifier]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* TouchEmulator initializer |
|||
*/ |
|||
function TouchEmulator() { |
|||
if (hasTouchSupport()) { |
|||
return; |
|||
} |
|||
|
|||
fakeTouchSupport(); |
|||
|
|||
window.addEventListener("mousedown", onMouse('touchstart'), true); |
|||
window.addEventListener("mousemove", onMouse('touchmove'), true); |
|||
window.addEventListener("mouseup", onMouse('touchend'), true); |
|||
|
|||
window.addEventListener("mouseenter", preventMouseEvents, true); |
|||
window.addEventListener("mouseleave", preventMouseEvents, true); |
|||
window.addEventListener("mouseout", preventMouseEvents, true); |
|||
window.addEventListener("mouseover", preventMouseEvents, true); |
|||
|
|||
// it uses itself!
|
|||
window.addEventListener("touchstart", showTouches, true); |
|||
window.addEventListener("touchmove", showTouches, true); |
|||
window.addEventListener("touchend", showTouches, true); |
|||
window.addEventListener("touchcancel", showTouches, true); |
|||
} |
|||
|
|||
// start distance when entering the multitouch mode
|
|||
TouchEmulator.multiTouchOffset = 75; |
|||
|
|||
/** |
|||
* css template for the touch rendering |
|||
* @param touch |
|||
* @returns object |
|||
*/ |
|||
TouchEmulator.template = function (touch) { |
|||
var size = 0; |
|||
var transform = 'translate(' + (touch.clientX - (size / 2)) + 'px, ' + (touch.clientY - (size / 2)) + 'px)'; |
|||
return { |
|||
position: 'fixed', |
|||
left: 0, |
|||
top: 0, |
|||
background: '#fff', |
|||
border: 'solid 1px #999', |
|||
opacity: .6, |
|||
borderRadius: '100%', |
|||
height: size + 'px', |
|||
width: size + 'px', |
|||
padding: 0, |
|||
margin: 0, |
|||
display: 'block', |
|||
overflow: 'hidden', |
|||
pointerEvents: 'none', |
|||
webkitUserSelect: 'none', |
|||
mozUserSelect: 'none', |
|||
userSelect: 'none', |
|||
webkitTransform: transform, |
|||
mozTransform: transform, |
|||
transform: transform, |
|||
zIndex: 100 |
|||
} |
|||
}; |
|||
|
|||
// export
|
|||
if (typeof define == "function" && define.amd) { |
|||
define(function () { |
|||
return TouchEmulator; |
|||
}); |
|||
} else if (typeof module != "undefined" && module.exports) { |
|||
module.exports = TouchEmulator; |
|||
} else { |
|||
window[exportName] = TouchEmulator; |
|||
} |
|||
})(window, document, "TouchEmulator"); |
|||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 15 KiB |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue