更新记录
1.0.0(2022-07-11)
下载此版本
上传
平台兼容性
HbuilderX/cli最低兼容版本 |
3.2.1 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
一个组件库
支持 小程序、H5等
页面名称 |
页面路径 |
首页 |
pages/index/index |
手写签名 |
pages/Handwritten_Signature/Handwritten_Signature |
左滑删除 |
pages/LeftSlideToDelete/LeftSlideToDelete |
自定义导航栏 |
pages/Custom_header/Custom_header |
正方体 |
pages/Asquare/Asquare |
金额转大写 |
pages/numberminTomax/numberminTomax |
进度条 |
pages/progress_Bar/progress_Bar |
时间选择器 |
pages/Time_Selector/Time_Selector |
购物车 |
pages/Shop_Cart/Shop_Cart |
搜索高亮显示 |
pages/Highlighted_Query/Highlighted_Query |
计算器 |
pages/Calculator/Calculator |
一个组件库具体介绍
- 传目前仅支持页面粘贴复制直接使用
- 最高境界,人虽死了,但代码活着,为后人敬仰。 一个组件库开源免费。
- 一个组件库是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后续会针对这方面持续优化。 #关于PR 我们非常乐意接受各位的优质PR,但在此之前我希望您了解一个组件库是一个需要兼容多个平台的(小程序、h5、ios app、android app)包括nvue页面、vue页面。 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!
安装
配置
基本使用方法
<template>
<view class="content" :style="{paddingTop:customBarH+44+'px'}">
<view class="header" :style="{height:customBarH+44+'px'}">
<view class="icon">
<image src="../../static/address.png" mode="aspectFill"></image>
</view>
<view class="prvice" @click="show = true">
{{prvice}}
</view>
</view>
<view class="title">
众芳摇落独暄妍,占尽风情向小园。
疏影横斜水清浅,暗香浮动月黄昏。
霜禽欲下先偷眼,粉蝶如知合断魂。
幸有微吟可相狎,不须檀板共金樽。
</view>
<view class="back" @click="back">返回</view>
<u-picker @close='close' @confirm='confirm' :closeOnClickOverlay='true' :show="show" :columns="columns">
</u-picker>
</view>
</template>
<script>
export default {
data() {
return {
customBarH: 0,
show: false,
columns: [
['成都市', '贵阳市', '重庆市', '深圳市', '武汉市']
],
prvice: '',
}
},
onLoad() {
let _this = this
uni.getSystemInfo({
success(e) {
console.log(e.statusBarHeight)
_this.customBarH = e.statusBarHeight
}
})
this.prvice = this.columns[0][0]
},
methods: {
close() {
this.show = false
},
confirm(e) {
this.show = false
console.log(e.value[0])
this.prvice = e.value[0]
},
change() {
},
click() {
},
back() {
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
image {
width: 100%;
height: 100%;
}
page {
background-color: #ffffff;
}
.title {
font-size: 28rpx;
width: 710rpx;
margin: auto;
height: 80rpx;
line-height: 80rpx;
color: #969B9E;
}
.header {
z-index: 999;
/* height:50upx; //改成下边自适应 */
width: 750rpx;
// background: linear-gradient(to right, blue, red);
background-color: #57c088;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
position: fixed;
top: 0;
.icon {
position: absolute;
bottom: 20rpx;
width: 35rpx;
height: 50rpx;
}
.prvice {
position: absolute;
bottom: 30rpx;
left: 70rpx;
font-size: 32rpx;
color: #FFF;
line-height: 100%;
}
}
.back {
width: 200rpx;
height: 80rpx;
font-size: 28rpx;
line-height: 80rpx;
text-align: center;
margin: 500rpx auto 0;
color: #FFFFFF;
// background: linear-gradient(to right, blue, red);
background-color: #57c088;
border-radius: 40rpx;
}
</style>
Tips