赞
踩
实现照片:
此过程先进入uniapp官网,找到扩展组件
打开找到里面的uni-popup和uni-icons
点击进入,下载&安装
点击下载并导入HBuilderX
导入到你使用的目录,如test目录
同样将uni-icons点击下载并导入HBuilderX
点击合并
此时test文件夹下多了一个uni-modules文件夹
在pages下的index.vue内编写代码,如下:
- <template>
- <view>
- <button @click="open">打开弹窗</button>
- <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0" :show="true" @close="closePopup">
- <view style="border-bottom: 1rpx solid #E5E5E5;padding:24rpx 0 32rpx; text-align: center;">提示</view>
- <view class="flex-colomn">
- <view class="tet">正确答案为:{{answer}}</view>
- <uni-icons class="close-btn" type="closeempty" size="20" @click="closePopup"></uni-icons>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- answer: 'A',
-
- }
- },
- methods:{
- open(){
- // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
-
- this.$refs.popup.open('bottom')
- },
-
- closePopup() {
- this.$refs.popup.close()
- },
- }
- }
- </script>
-
-
-
- <style>
- .tet {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- height: 45vh;
- font-size: 25px;
- margin-top: 20rpx;
- }
- .close-btn {
- position: absolute;
- top: 20rpx;
- right: 20rpx;
- cursor: pointer;
-
- }
-
- </style>
里面代码官网都有解释,获得底部弹出效果。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。