您的位置：鳄鱼CMS > 微信小程序确认框微信小程序 WeUI·确认页样式

微信小程序确认框微信小程序 WeUI·确认页样式

2023-05-30 04:31

微信小程序确认框

微信小程序确认框是一种常用的弹出框，它可以帮助用户在使用小程序时进行必要的确认。它可以显示一个消息，并要求用户选择“是”或“否”。

微信小程序确认框的使用非常方便，只需要在代码中调用wx.showModal()函数即可。该函数有两个必填参数：title和content，分别表示标题和内容。此外，还有一些可选参数：cancelText、confirmText、success、fail、complete。

wx.showModal({
  title: '标题',
  content: '内容',
  cancelText: '取消', // 取消文字，默认为取消
  confirmText: '确定', // 确定文字，默认为确定
  success: function (res) { // 接口调用成功的回调函数  
    if (res.confirm) {   // 用户点击了“确定”  

    } else if (res.cancel) { // 用户点击了“取消”

    }  
  },  
  fail: function () {}, // 接口调用失败的回调函数  
  complete: function () {} // 接口调用结束的回调函数  
})

微信小程序 WeUI·确认页样式

Msg

Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式。

示例代码：

{
  "usingComponents": {
    "mp-msg": "../components/msg/msg"
  },
  "navigationBarTitleText": "UI组件库"
}

<view class="page">
    <mp-msg type="success" title="操作成功">
        <view slot="desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
        <view slot="extend">
            <view>1. 说明1</view>
            <view>2. 说明2</view>
        </view>
        <view slot="handle">
            <button class="weui-btn" type="primary">主要操作</button>
            <button class="weui-btn" type="default">辅助操作</button>
        </view>
        <view slot="footer">
            <view class="weui-footer__links">
                <navigator url="" class="weui-footer__link">底部链接文本</navigator>
            </view>
            <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
        </view>
    </mp-msg> 
</view>

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
type	string		否	顶部图标的样式，和icon组件的type属性用法一样
size	number	64	否	type不为空的时候有效，和icon组件的size属性用法一样
icon	string		否	type为空的时候，icon的值是顶部图标的路径
title	string		否	标题
desc	string		否	描述内容，和desc的slot显示在相同的位置

Slot

名称	描述
desc	描述内容slot
extend	desc下面的说明区域的slot
handle	操作按钮区域slot
footer	底部slot

阅读全文

以上是鳄鱼CMS为你收集整理的微信小程序确认框微信小程序 WeUI·确认页样式全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

微信小程序小程序使用·addTip

2023-06-20

immediateDelivery.addTip本接口应在服务器端调用，详细说明参见服务端API。可以对待接单状态的订单增加小费。需要注意：订单的...
微信小程序运维主要做什么微信小程序运维中心·getSceneList

2023-04-06

operation.getSceneList本接口应在服务器端调用，详细说明参见服务端API。获取访问来源请求地址GET https://api.weixin.qq.com/w...
PostgreSQL SPI_cursor_open

2023-05-10

SPI_cursor_open — 使用由SPI_prepare创建的语句建立一个游标大纲Portal SPI_cursor_open(const char * name, SPIPlanPtr plan...
PostgreSQL SPI_cursor_close

2023-04-19

SPI_cursor_close — 关闭一个游标大纲void SPI_cursor_close(Portal portal)描述 SPI_cursor_close关闭一个之前创建的游标并且...
PostgreSQL SPI_getvalue

2023-06-16

SPI_getvalue — 返回指定列的字符串值大纲char * SPI_getvalue(HeapTuple row, TupleDesc rowdesc, int colnumber)描述 SPI_get...