uniapp开发微信小程序初次加载弹窗显示隐私政策
初始化加载及函数操作。
·
效果图:
废话不多说,直接上代码:
<uni-popup
ref="uPopup"
:mask-click="false"
type="center">
<view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: scrollHeight * 0.70 + 'px' }">
<!-- 弹框提示头 -->
<view class="u-text-center">用户使用须知</view>
<scroll-view scroll-y class="agreement-content" :style="{ height: (scrollHeight - 110) * 0.70 + 'px' }">
您描述的内容
</scroll-view>
<view class="agreement-btns" :style="{ height: (scrollHeight*0.7 - (scrollHeight - 120) * 0.70) - 42 + 'px' }">
<navigator class="no-btn text" target="miniProgram" open-type="exit">
暂不使用
</navigator>
<view class="yse-btn text" @tap="admit">同意</view>
</view>
</view>
</uni-popup>
声明变量
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{
/* line-height: 18px; */
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;
/* justify-content: 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%;
/* height: 85rpx; */
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{
/* background-color: aquamarine; */
flex: 1;
text-align: center;
width: 100%;
height: 100%;
border-radius: 0 0 0 20rpx;
}
.text{
line-height: 46px;
}
更多推荐
已为社区贡献3条内容
所有评论(0)