效果图:
废话不多说,直接上代码:
用户使用须知 您描述的内容 暂不使用 同意
声明变量
data() {return {// 内容的高度scrollWidth: uni.getSystemInfoSync().windowWidth,scrollHeight: uni.getSystemInfoSync().windowHeight,}}
初始化加载及函数操作
mounted() {this.judge();},methods: {// 初始化的时候调用参数,判断用户是否第一次进入judge() {uni.getStorage({key:'agreement_key',success: () => {// 获取到了不显示弹窗this.$refs.uPopup.close();uni.showTabBar({animation: true})},fail: () => {uni.hideTabBar({animation: true})this.$refs.uPopup.open('center');}})},// 同意按钮admit() {try{uni.setStorageSync('agreement_key', 'yes');uni.setStorageSync('agreement_Date', new Date().toLocaleString())}catch(e){//TODO handle the exception}this.$refs.uPopup.close();uni.showTabBar({animation: true})},}
css样式:
.line{font-family:Arial,Helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}.agreement-view{margin-top: 20px;box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);border-radius: 20rpx;padding: 20rpx 0rpx 0rpx 0rpx;display: flex;flex-direction: column;width: 300px;height: 400px;align-items: center;background-color: #fff;}.u-text-center{font-size: 15px;padding-bottom: 20rpx;font-family:Arial,Helvetica,sans-serif;font-weight: 600;width: 100%;height: 30px;text-align: center;}.agreement-content{overflow-y: scroll;padding: 0rpx 20rpx 10rpx 20rpx;}.agreement-btns{width: 100%;display: flex;flex-direction: row;}.yse-btn{color: #fff;background-color: red;flex: 1;text-align: center;width: 100%;height: 100%;border-radius: 0 0 20rpx 0;flex-direction: column;align-items: center;justify-content: center;}.no-btn{flex: 1;text-align: center;width: 100%;height: 100%;border-radius: 0 0 0 20rpx;}.text{line-height: 46px;}
来源地址:https://blog.csdn.net/qq_37535558/article/details/126808741