小程序的底部弹窗（半屏弹窗）

我这里主要是使用小程序的原生组件WeUI来完成的，需要引入WeUI组件库。这里就不教如何引入库，需要导入WeUI组件库的请看小程序开发：轻松导入WeUI包
主要讲解如何使用Half Screen Dialog标签。
首先就是通过json文件引入到你需要使用组件的页面。

{"usingComponents": {"mp-half-screen-dialog":"/weui-miniprogram/half-screen-dialog/half-screen-dialog"}
}

这里的 mp-half-screen-dialog 为标签名，可以自己定义标签名，/weui-miniprogram/half-screen-dialog/half-screen-dialog 为引入包的相对路径，引入WeUI组件库包的half-screen-dialog的文件。
接下来就是如何使用，首先就是在wxml文件中直接使用标签

<mp-half-screen-dialog></mp-half-screen-dialog>

他的属性主要是以下几个：
extClass：组件类名
title：组件主标题标题
desc：辅助操作描述内容，可以简单的显示一些文字
show：是否开启弹窗（默认为true）ps:主要靠此属性来完成弹出效果
buttons：辅助操作按钮列表
bindbuttontap：点击辅助操作按钮时触发
bindclose：组件关闭时候触发
以及slot属性。

wxml:

<mp-half-screen-dialogetClass="test"title="test"desc="hello,this is test."show="{{show}}"buttons="{{buttons}}"bindbuttontap="bindButtonTap"bindclose="bindClose"></mp-half-screen-dialog>
<button type="primary" bindtap="btn">test</button>

js:

data: {show:false,buttons:[{type:'default',className:'test1',text:'测试1',value:0},{type:'primary',className:'test2',text:'测试2',value:1}]
},
btn:function(){this.setData({show:true})
},
bindClose:function(){console.log("bindClose")
},
bindButtonTap:function(e){console.log(e.detail)this.setData({show:false})
}

大致效果如下图：

slot

这使得单独拿出来讲的，开发过程中slot使用的会比较多，属于自定义标题、内容和按钮。
使用方法如下：

<mp-half-screen-dialogetClass="test"show="{{show}}"bindbuttontap="bindButtonTap"bindclose="bindClose"
><view slot="title"><text>这是标题</text></view><view slot="desc"><view style="font-size: 50rpx;">这是内容</view><text style="color: red;">内容可以像页面一样设计</text>    </view><view slot="footer"><button type="primary">这是按钮</button></view>
</mp-half-screen-dialog>
<button type="primary" bindtap="btn">test</button>

ps：一旦使用自定义的东西后，不可以使用 title、desc、buttons属性，否则slot属性将无法生效。
以下为效果图：

设计：秋
编辑：千歌

小程序开发：小程序的底部弹窗（半屏弹窗）相关推荐

微信小程序底部弹窗（半屏弹窗）---WeUI组件使用
小程序的底部弹窗(半屏弹窗) 我这里主要是使用小城的原生组件WeUI来完成的,需要引入WeUI组件库.这里就不教如何引入库,主要讲解如何使用Half Screen Dialog标签. 首先就是通过js ...
自定义半屏弹窗Dialog或Activity背景半透明
一.先看看效果图实现半屏弹窗,背景半透明,可以使用Dialog或Activity来实现. 二.动画效果实现从下往上弹出,从上往下关闭. 从下往上弹出:anim_slide_in_bottom.xm ...
微信程序开发小程序入门
1.小程序简介微信官方文档小程序的生命周期 // app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorag ...
用什么服务器开发小程序,开发小程序用什么服务器系统
开发小程序用什么服务器系统内容精选换一换按照翻译方式的不同,高级语言通常可以分为两类:一类是编译翻译,一类是解释翻译,分别对应着编译型语言和解释型语言.编译型语言典型的如C.C++语言,都属于编 ...
微信“小程序”开发小指南
最近两天程序员界最火的应该就是微信"小程序",抽空试了一下,感觉上手很容易,微信提供的各种组件.API都很全,但是要做的与众不同又性能优良也是不太容易的.本文将首先谈一下我们的小程 ...
uniapp小程序开发设置系统状态栏高度、全屏背景图设置
效果: uniapp小程序开发设置系统状态栏高度/全屏背景图设置 <view class="login"><view class="status_bar ...
强烈推介的几个微信小程序开发小技巧，简单又实用
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家.如果对大家确实有帮助,别忘了点赞哦 ???? - 微信开发者工具版本:1 ...
微信小程序开发 | 小程序开发框架
小程序开发框架 7.1 小程序模块化开发 7.1.1 模块 7.1.2 模板 7.1.3 自定义组件 7.1.4插件 7.2 小程序基础样式库-WeUI 7.2.1 初识WeUI 7.2.2[案例]电 ...
微信小程序开发—小程序开发入门
我参加CSDN博客之星评选啦,感谢大家前往投票支持! 投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search 本篇将为大家详细 ...

小程序开发：小程序的底部弹窗（半屏弹窗）

小程序的底部弹窗（半屏弹窗）

slot

小程序开发：小程序的底部弹窗（半屏弹窗）相关推荐

最新文章

热门文章