更新记录

1.0.0（2022-07-11）

上传

平台兼容性

一个组件库

支持 小程序、H5等

一个组件库具体介绍

• 传目前仅支持页面粘贴复制直接使用
• 最高境界，人虽死了，但代码活着，为后人敬仰。 一个组件库开源免费。
• 一个组件库是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

• 自由发挥、欢迎反馈

• 对性能要求较高的话，推荐使用iview、uview等

• 报错很正常