小程序中带图片modal的实现
时间:2022-05-03
本文章向大家介绍小程序中带图片modal的实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。但是,只支持文本内容,没办法插入图片素材。
先来看看wx.showModal的用法:
wx.showModal({
title: '温馨提示',
content: '提示内容。。。',
confirmText: '确定',
confirmColor: '#1677d2',
cancelText: '取消',
cancelColor: '#999',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定按钮');
} else if (res.cancel) {
console.log('用户点击取消按钮');
}
}
})
详细API,请查看:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject
API中确实没有插入图片素材的参数,因此,只能自己来现实一个图文的modal了~
wxml:
<!-- 图文弹框 -->
<view class='modal-image-text' wx:if="{{modal.isShow}}">
<view class='modal-mask' bindtap='{{!buttonClicked? "modalClick":""}}'></view>
<view class='modal-content'>
<view class='modal-header'>{{modal.title}}</view>
<view class='modal-body'>
<view>{{modal.desc}}</view>
<image src='{{modal.src}}' mode='widthFix' />
</view>
<view class='modal-footer'>
<view class='modal-btn modal-cancel width50' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='0' wx:if="{{modal.cancel}}">{{modal.cancel}}</view>
<view class='modal-btn modal-ok {{modal.cancel?"width50":""}}' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='1'>{{modal.ok}}</view>
</view>
</view>
</view>
js:
modal: {
isShow: false, // 图文弹框是否显示
title: '提示', // 标题
desc: '提示内容', // 内容
src: '', // 图片地址,必填,如果没有图片,请直接使用wx.showModal
ok: '确定', // 确定按钮文本
cancel: '', // 取消按钮文本
}
CSS的代码,这里省略了,JS直接控制modal.isShow就可以让弹框显示或者隐藏了~如果你觉得不够酷炫,可以自己添加CSS动画效果。
效果截图如下:
发现个问题:弹出框后,页面仍然可以滑动。如果你不想让页面滑动,可以添加事件catchtouchmove,这样就会默认阻止事件向上冒泡了,上层view的滑动就不生效了,代码:
<view class='modal-image-text' wx:if="{{modal.isShow}}" catchtouchmove="move">
move: function (e) {
console.log(222333); // catch绑定的事件不会向上冒泡
},
后续有时间,我再把上面代码整理成组件,今天就分享到这儿~
- 1212: [HNOI2004]L语言
- POJ 2942Knights of the Round Table(tarjan求点双+二分图染色)
- 算法模板——平衡树Treap
- Java并发编程
- 算法模板——线段树2(区间加+区间乘+区间求和)
- 1798: [Ahoi2009]Seq 维护序列seq
- 【LeetCode 389】 关关的刷题日记30 Find the Difference
- 1708: [Usaco2007 Oct]Money奶牛的硬币
- 1856: [Scoi2010]字符串
- 【LeetCode 409】 关关的刷题日记31Longest Palindrome
- Git的奇技淫巧?
- 3224: Tyvj 1728 普通平衡树
- 【LeetCode 136】 关关的刷题日记32 Single Number
- 1599: [Usaco2008 Oct]笨重的石子
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 20个能够有效提高 Pandas数据分析效率的常用函数,附带解释和例子
- 4.深入k8s:持久卷PV、PVC及其源码分析
- 5.深入k8s:StatefulSet控制器及源码分析
- 简介机器学习中的特征工程
- 在机器学习回归问题中,你应该使用哪种评估指标?
- 6.深入k8s:守护进程DaemonSet及源码分析
- 无所不能的Embedding 1 - Word2vec模型详解&代码实现
- 【JS】676- 1.1w字 | 初中级前端 JavaScript 自测清单 - 2
- matplotlib基础绘图命令之imshow
- 聊聊dubbo-go的broadcastCluster
- 爬取博客园文章
- 配置Python开发环境
- 部署Python应用
- 重写ThreadPoolTaskExecutor
- 聊聊dubbo-go的forkingCluster