微信小程序wx.showModal如何修改样式

 时间:2024-10-31 20:46:13

1、打开桌面上的“微信Web开发者工具”,如下图所示:

微信小程序wx.showModal如何修改样式

3、手机上微信扫描2步骤的二维码,进行登陆,如下图所示:

微信小程序wx.showModal如何修改样式

5、选择“添加项目”,如下图所示:

微信小程序wx.showModal如何修改样式

7、为index.wxml藜局腑载添加如下图代码:<!--index.wxml--><button class="show-btn&qu泠贾高框ot; bindtap="showDialogBtn">弹窗</button><!--弹窗--><view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view><view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-title">添加数量</view> <view class="modal-content"> <view class="modal-input"> <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input> </view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view></view>

微信小程序wx.showModal如何修改样式

9、index.js代码如下图所示://index.js//获取应用实例var app = getApp()Page({ data: { showModal: false, }, onLoad: function () { }, /** * 弹窗 */ showDialogBtn: function () { this.setData({ showModal: true }) }, /** * 弹出框蒙层截断touchmove事件 */ preventTouchMove: function () { }, /** * 隐藏模态对话框 */ hideModal: function () { this.setData({ showModal: false }); }, /** * 对话框取消按钮点击事件 */ onCancel: function () { this.hideModal(); }, /** * 对话框确认按钮点击事件 */ onConfirm: function () { this.hideModal(); }})

微信小程序wx.showModal如何修改样式
  • 解决github提交时提示“请使用个人访问令牌..”
  • 如何在powerdesigner上将CDM转为LDM?
  • SVN之tag打包
  • ASP.NET网站怎么发布 Web项目程序怎么发布部署
  • 微信小程序怎么做循环动画
  • 热门搜索
    旅游计划书范文 江苏苏州旅游景点大全 咸宁旅游景点大全 辽宁周边旅游景点大全 旅游集散中心上海 南普陀寺旅游攻略 去澳门旅游注意事项 旅游群 爱琴海旅游报价 虚拟旅游网