学生排队 bootstrap WorldCloud silverlight redux import notifications vue插件 android实战项目 jquery去空格 jq解析json bentley软件介绍 arraylist删除指定元素 windows杀死进程命令 html下拉框默认选中 python中index的用法 配置python环境 java继承关键字 java接口文档 如何查看java版本 java单继承 java接口的实例 java删除 java获取文件 java网络编程实例 忧思华光玉攻略 数据库系统概论第五版 workflow中文 通达信金融终端官网 vbs编程教学 keytool下载 源计划艾克 博途v14安装教程 js发送http请求 分屏软件 qq农场图标 战法装备 屏幕录像机 js文件上传插件 ps怎么p人脸
当前位置: 首页 > 学习教程  > 编程语言

微信小程序学习之自定义对话框、底部弹出框(总结)

2020/10/16 17:48:25 文章标签:

在Android开发中&#xff0c;经常需要我们自定义对话框或者底部弹出框&#xff0c;用于满足客户的需求。在微信小程序中&#xff0c;也是如此。 一、自定义对话框 &#xff08;1&#xff09;列表形式。 WXML文件代码如下&#xff1a; <!-- 支付方式对话框 --> <vi…

在Android开发中,经常需要我们自定义对话框或者底部弹出框,用于满足客户的需求。在微信小程序中,也是如此。

一、自定义对话框

(1)列表形式。

WXML文件代码如下:

<!-- 支付方式对话框 -->

<view class="fadeIn" wx:if="{{isShowPayTypeDialog}}">

  <view class="weui-mask"></view>

  <view class="weui-dialog">

    <text class="border_bottom p_item_h font_size_30" bindtap="dialogItemClick" data-index="0">线上支付</text>

    <text class="p_item_h font_size_30 border_bottom" bindtap="dialogItemClick" data-index="1">线下支付</text>

    <text class="p_item_h font_size_30 font_color_gray" bindtap="dialogItemClick" data-index="-1">取消</text>

  </view>

</view>

JS文件代码如下:

  /* 选择支付方式 */

  dialogItemClick: function (event) {

    var index = parseInt(event.currentTarget.dataset.index);

    if (index >= 0) {

      this.setData({payType: this.data.payTypeList[index]});

    }

    this.setData({isShowPayTypeDialog: false});

    this.setData({isShowInput: true});

  },

 

  /* 显示选择支付方式对话框 */

  showPayTypeDialog: function (params) {

    this.setData({isShowPayTypeDialog: true});

    this.setData({isShowInput: false});

  },


本文链接: http://www.dtmao.cc/news_show_300180.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?