小程序模态框（小程序界面模板）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈小程序模态框，以及小程序界面模板对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
- 1、微信小程序模态框textarea能滚动的问题
- 2、微信小程序如何实现消息提示框
- 3、如何用模态窗口 modal-content 实现动画效果
- 4、bootstrap 模态框（modal）点击空白处和ESC不关闭的方法
- 5、Taro自定义模态框（modal）
- 6、小程序的 iview Weapp 组件库的使用
微信小程序模态框textarea能滚动的问题
最近写微信小程序做了一个评论的模态框组件，发现页面textarea 用catchtouchmove="true" 禁止滚动安卓机可以，但是苹果的不行，最后定位在textarea 这个标签能滚动的问题
解决办法：
添加 fixed="true" 就不会滚动了
微信小程序如何实现消息提示框
微信小程序开发中toast也是重要的消息提示方式.
提示框：
wx.showToast(OBJECT)
显示消息提示框
OBJECT参数说明：
示例代码：
?
12345
wx.showToast({ title:'成功', icon:'success', duration: 2000})
wx.hideToast()
隐藏消息提示框
?
123456789
wx.showToast({ title:'加载中', icon:'loading', duration: 10000}) setTimeout(function(){ wx.hideToast()},2000)
wx.showModal(OBJECT)
显示模态弹窗
OBJECT参数说明：
示例代码：
?
123456789
wx.showModal({ title:'提示', content:'这是一个模态弹窗', success:function(res) { if(res.confirm) { console.log('用户点击确定') } }})
wx.showActionSheet(OBJECT)
显示操作菜单
OBJECT参数说明：
success返回参数说明：
示例代码：
?
12345678
wx.showActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!res.cancel) { console.log(res.tapIndex) } }})
设置导航条
view提示：{{tip}}/view
button type="default" bindtap="showModal"点击我弹出modal对话框/button
view
modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"
bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel"您好，我是modal对话框/modal
/view
Page({
data:{
// text:"这是一个页面"
tip:'',
buttonDisabled:false,
modalHidden:true,
show:false
},
showModal:function(){
this.setData({
modalHidden:!this.data.modalHidden
})
},
modalBindaconfirm:function(){
this.setData({
modalHidden:!this.data.modalHidden,
show:!this.data.show,
tip:'您点击了【确认】按钮！',
buttonDisabled:!this.data.buttonDisabled
})
},
modalBindcancel:function(){
this.setData({
modalHidden:!this.data.modalHidden,
tip:'您点击了【取消】按钮！'
})
}
})
wx.setNavigationBarTitle(OBJECT)
动态设置当前页面的标题。
OBJECT参数说明：
示例代码：
?
123
wx.setNavigationBarTitle({ title:'当前页面'})
wx.showNavigationBarLoading()
在当前页面显示导航条加载动画。
wx.hideNavigationBarLoading()
隐藏导航条加载动画。
页面跳转：
wx.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
OBJECT参数说明：
示例代码：
?
123
wx.navigateTo({ url:'test?id=1'})
?
123456
//test.jsPage({ onLoad:function(option){ console.log(option.query) }})
注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。
wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
OBJECT参数说明：
示例代码：
?
123
wx.redirectTo({ url:'test?id=1'})
wx.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
OBJECT参数说明：
动画：
wx.createAnimation(OBJECT)
创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
注意: export 方法每次调用后会清掉之前的动画操作
OBJECT参数说明：
?
123456
var animation = wx.createAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})
animation
动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
样式：
旋转：
缩放：
偏移：
倾斜：
矩阵变形：
动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
示例：
?
1
viewanimation="{{animationData}}"style="background:red;height:100rpx;width:100rpx"/view
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
Page({ data: { animationData: {} }, onShow:function(){ varanimation = wx.createAnimation({ duration: 1000, timingFunction:'ease', }) this.animation = animation animation.scale(2,2).rotate(45).step() this.setData({ animationData:animation.export() }) setTimeout(function() { animation.translate(30).step() this.setData({ animationData:animation.export() }) }.bind(this), 1000) }, rotateAndScale:function () { // 旋转同时放大 this.animation.rotate(45).scale(2, 2).step() this.setData({ animationData:this.animation.export() }) }, rotateThenScale:function () { // 先旋转后放大 this.animation.rotate(45).step() this.animation.scale(2, 2).step() this.setData({ animationData:this.animation.export() }) }, rotateAndScaleThenTranslate:function () { // 先旋转同时放大，然后平移 this.animation.rotate(45).scale(2, 2).step() this.animation.translate(100, 100).step({ duration: 1000 }) this.setData({ animationData:this.animation.export() }) }})
wx.hideKeyboard()
收起键盘。
如何用模态窗口 modal-content 实现动画效果
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
用法
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
$('#identifier').modal(options)
实例
一个静态的模态窗口实例，如下面的实例所示：
实例
h2创建模态框（Modal）/h2
!-- 按钮触发模态框 --
button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"开始演示模态框/button
!-- 模态框（Modal） --
div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
div class="modal-dialog"
div class="modal-content"
div class="modal-header"
button type="button" class="close" data-dismiss="modal" aria-hidden="true"times;/button
h4 class="modal-title" id="myModalLabel"模态框（Modal）标题/h4
/div
div class="modal-body"在这里添加一些文本/div
div class="modal-footer"
button type="button" class="btn btn-default" data-dismiss="modal"关闭/button
button type="button" class="btn btn-primary"提交更改/button
/div
/div!-- /.modal-content --
/div!-- /.modal --
/div
尝试一下 ?0?3
结果如下所示：
模态框（Modal）插件
代码讲解：
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在 button 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
第一是 .modal，用来把 div 的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
div class="modal-header"，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
选项
有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：
选项名称类型/默认值Data 属性名称描述
backdropboolean 或 string 'static'
默认值：truedata-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboardboolean
默认值：truedata-keyboard当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
showboolean
默认值：truedata-show当初始化时显示模态框。
remotepath
默认值：falsedata-remote使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：
a data-toggle="modal" href="remote" data-target="#modal"请点击我/a
方法
下面是一些可与 modal() 一起使用的有用的方法。
方法描述实例
Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({
keyboard: false
})
Toggle: .modal('toggle')手动切换模态框。
$('#identifier').modal('toggle')
Show: .modal('show')手动打开模态框。
$('#identifier').modal('show')
Hide: .modal('hide')手动隐藏模态框。
$('#identifier').modal('hide')
实例
下面的实例演示了方法的用法：
实例
!-- 模态框（Modal） --
div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
div class="modal-dialog"
div class="modal-content"
div class="modal-header"
button type="button" class="close" data-dismiss="modal" aria-hidden="true"×/button
h4 class="modal-title" id="myModalLabel"模态框（Modal）标题/h4
/div
div class="modal-body"按下 ESC 按钮退出。/div
div class="modal-footer"
button type="button" class="btn btn-default" data-dismiss="modal"关闭/button
button type="button" class="btn btn-primary"提交更改/button
/div
/div!-- /.modal-content --
/div!-- /.modal-dialog --
/div
!-- /.modal --
script
$(function() {
$('#myModal').modal({
keyboard: true
})
});
/script
尝试一下 ?0?3
结果如下所示：
模态框（Modal）插件方法
只需要点击 ESC 键，模态窗口即会退出。
事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件描述实例
show.bs.modal在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作
})
shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作
})
hide.bs.modal当调用 hide 实例方法时触发。
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作
})
hidden.bs.modal当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作
})
实例
下面的实例演示了事件的用法：
实例
!-- 模态框（Modal） --
h2模态框（Modal）插件事件/h2
!-- 按钮触发模态框 --
button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"开始演示模态框/button
!-- 模态框（Modal） --
div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
div class="modal-dialog"
div class="modal-content"
div class="modal-header"
button type="button" class="close" data-dismiss="modal" aria-hidden="true"×/button
h4 class="modal-title" id="myModalLabel"模态框（Modal）标题/h4
/div
div class="modal-body"点击关闭按钮检查事件功能。/div
div class="modal-footer"
button type="button" class="btn btn-default" data-dismiss="modal"关闭/button
button type="button" class="btn btn-primary"提交更改/button
/div
/div!-- /.modal-content --
/div!-- /.modal-dialog --
/div
!-- /.modal --
script
$(function() {
$('#myModal').modal('hide')
})});
/script
script
$(function() {
$('#myModal').on('hide.bs.modal',
function() {
alert('嘿，我听说您喜欢模态框');
})
});
/script
bootstrap 模态框（modal）点击空白处和ESC不关闭的方法
bootstrap 模态框（modal）默认点击非模态框部分和键盘esc会关闭模态框，但是有时会有需求不允许关闭，所以介绍一下实现这种需求的两种方法。
第一种：使用js
$('#modal').modal({backdrop: 'static', keyboard: false});
backdrop:static时,空白处不关闭.
keyboard:false时,esc键盘不关闭.
第二种：使用属性
data-backdrop="static" data-keyboard="false"
如：
Taro自定义模态框（modal）
创建组件 myModal文件夹然后新建index.tsx以及index.scss
1, index.tsx
import Taro, {useState, useEffect} from "@tarojs/taro"
import { View} from '@tarojs/components'
import {ITouchEvent} from '@tarojs/components/types/common'
import './index.scss'
interface MyModalProps {
status: boolean
title?: string
closeBtn?: boolean
closeBtnText?: string
confirmBtn?: boolean
confirmBtnText?: string
handleClose: (e: ITouchEvent) = void
handleConfirm: (e: ITouchEvent)= void
}
const MyModal: Taro.FCMyModalProps = (props) = {
const [closeBtn, setCloseBtn] = useState(true)
const [confirmBtn, setConfirmBtn] = useState(true)
useEffect(() = {
if(props.closeBtn != undefined) {
setCloseBtn(props.closeBtn)
}
if(props.confirmBtn != undefined) {
setConfirmBtn(props.confirmBtn)
}
}, [props])
return (View className='modalImportant' style={props.status? {display: 'flex'}: {display: 'none'}}
View className='modalContent'
View className='modalHeader'{props.title?props.title:'提示'}/View
View className='modalBody'{props.children}/View
View className='modalFooter'
View className={closeBtn?'footerItem':'footerItem hide'}
style={confirmBtn closeBtn?{borderRight: '1px solid #d2d2d2;'}:{}}
onClick={e = props.handleClose(e)}
{props.closeBtnText?props.closeBtnText:'关闭'}
/View
View className={confirmBtn?'footerItem footerColor':'footerItem hide'}
onClick={e = props.handleConfirm(e)}
{props.confirmBtnText?props.confirmBtnText:'确认'}
/View
/View
/View
/View
)
}
export default MyModal
2,index.scss
.modalImportant{
position: absolute;
z-index: 1;
width: 100vw;
height: calc(100vh - 194px);
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
top: 0;
.modalContent{
width: 75vw;
background-color: #fff;
border-radius: 10px;
padding: 16px;
}
3,组件引入
import MyModal from '../../../components/MyModal'
...
const [isImportant, setIsImportant] = useState(false) // 模态框
MyModal
status={isImportant}
handleClose={e = {
Taro.switchTab({
url: '/pages/me/index'
}).then(() = {
console.log('成功跳转到我的页面成功')
})
}}
handleConfirm={e = {setIsImportant(false);confirmOrder()}}
title='重要提示'
confirmBtn={true}
closeBtnText='去补充'
confirmBtnText='先接单'
View className='modalItem'contant/View
/MyModal
小程序的 iview Weapp 组件库的使用
iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。
商城小程序必备的数字输入框。
在 .json 中引入组件
在 .wxml 中引入
下面是运行的效果，总的来看还是不错的。
还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。
在 .json 中引入组件
在 .wxml 中引入组件
这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
总的来讲 iview 还比较好看的。
更多用法去参考：
另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具
小程序模态框的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序界面模板、小程序模态框的信息别忘了在本站进行查找喔。
