微信小程序—自定义模态对话框实例

末蓝、 2022-06-10 09:44 295阅读 0赞

<table style="word-wrap:break-word; margin:0px; padding:0px; empty-cells:show; border-collapse:collapse; border:0px; border-spacing:0px; table-layout:fixed; width:730px; height:300px; color:rgb(102,102,102); font-family:&quot;Microsoft Yahei&quot;,Simsun; font-size:14px"> 
 <tbody style="word-wrap:break-word; margin:0px; padding:0px"> 
 <tr style="word-wrap:break-word; margin:0px; padding:0px; border:0px"> 
 <td style="word-wrap:break-word; margin:0px; padding:0px; border:0px; vertical-align:top"> <h1 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.6em; border:0px; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a href="http://xcx.9.cn" rel="nofollow">微信小程序</a>—自定义模态对话框实例</h1> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 由于官方API提供的显示模态弹窗，只能简单地显示文字内容，不能对对话框内容进行自定义，欠缺灵活性，所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。 
 <ul style="word-wrap:break-word; margin:1em 2em; padding:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> wx.showModal(OBJECT)</li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> 自定义</li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> 模态对话框</li> 
 </ul> 
 <hr style="word-wrap:break-word; margin:2em 0px; padding:0px; clear:both; border-right-width:0px; border-bottom-width:0px; border-left-width:0px; border-top-style:solid; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> <h2 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.13em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>涉及文件</h2> 
 <ul style="word-wrap:break-word; margin:1em 2em; padding:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> 界面&nbsp;<code style="word-wrap:break-word; margin:0px; padding:2px 4px; font-family:&quot;Source Code Pro&quot;,monospace; font-size:13.5px; white-space:nowrap">wxml</code></li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> 样式&nbsp;<code style="word-wrap:break-word; margin:0px; padding:2px 4px; font-family:&quot;Source Code Pro&quot;,monospace; font-size:13.5px; white-space:nowrap">wxcss</code></li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px; list-style:disc"> 事件及方法&nbsp;<code style="word-wrap:break-word; margin:0px; padding:2px 4px; font-family:&quot;Source Code Pro&quot;,monospace; font-size:13.5px; white-space:nowrap">js</code></li> 
 </ul> <h2 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.13em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>效果图</h2> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> <img src="https://img-blog.csdn.net/20170616174758314?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1eWI4Mjk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="word-wrap:break-word; margin:0px 0px 12px; padding:0px; border:none; max-width:100%"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> <img src="https://img-blog.csdn.net/20170616174848815?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1eWI4Mjk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="" style="word-wrap:break-word; margin:0px 0px 12px; padding:0px; border:none; max-width:100%"> <h2 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.13em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>界面代码 .wxml</h2> <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;">&lt;button class="show-btn" bindtap="showDialogBtn"&gt;弹窗&lt;/button&gt;

&lt;!--弹窗--&gt;
&lt;view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{
 {
 showModal}}"&gt;&lt;/view&gt;
&lt;view class="modal-dialog" wx:if="{
 {
 showModal}}"&gt;
 &lt;view class="modal-title"&gt;添加数量&lt;/view&gt;
 &lt;view class="modal-content"&gt;
 &lt;view class="modal-input"&gt;
 &lt;input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"&gt;&lt;/input&gt;
 &lt;/view&gt;
 &lt;/view&gt;
 &lt;view class="modal-footer"&gt;
 &lt;view class="btn-cancel" bindtap="onCancel" data-status="cancel"&gt;取消&lt;/view&gt;
 &lt;view class="btn-confirm" bindtap="onConfirm" data-status="confirm"&gt;确定&lt;/view&gt;
 &lt;/view&gt;
&lt;/view&gt;</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 </ul></pre> <h2 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.13em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>样式 .wxss</h2> <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;">.show-btn {
 margin-top: 100rpx;
 color: #22cc22;
}

.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
 color: #fff;
}

.modal-dialog {
 width: 540rpx;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 background: #f9f9f9;
 margin: -180rpx 105rpx;
 border-radius: 36rpx;
}

.modal-title {
 padding-top: 50rpx;
 font-size: 36rpx;
 color: #030303;
 text-align: center;
}

.modal-content {
 padding: 50rpx 32rpx;
}

.modal-input {
 display: flex;
 background: #fff;
 border: 2rpx solid #ddd;
 border-radius: 4rpx;
 font-size: 28rpx;
}

.input {
 width: 100%;
 height: 82rpx;
 font-size: 28rpx;
 line-height: 28rpx;
 padding: 0 20rpx;
 box-sizing: border-box;
 color: #333;
}

input-holder {
 color: #666;
 font-size: 28rpx;
}

.modal-footer {
 display: flex;
 flex-direction: row;
 height: 86rpx;
 border-top: 1px solid #dedede;
 font-size: 34rpx;
 line-height: 86rpx;
}

.btn-cancel {
 width: 50%;
 color: #666;
 text-align: center;
 border-right: 1px solid #dedede;
}

.btn-confirm {
 width: 50%;
 color: #ec5300;
 text-align: center;
}</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">17</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">18</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">19</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">20</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">21</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">22</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">23</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">24</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">25</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">26</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">27</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">28</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">29</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">30</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">31</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">32</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">33</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">34</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">35</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">36</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">37</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">38</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">39</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">40</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">41</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">42</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">43</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">44</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">45</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">46</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">47</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">48</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">49</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">50</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">51</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">52</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">53</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">54</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">55</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">56</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">57</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">58</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">59</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">60</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">61</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">62</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">63</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">64</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">65</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">66</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">67</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">68</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">69</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">70</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">71</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">72</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">73</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">74</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">75</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">76</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">77</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">78</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">79</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">80</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">81</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">82</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">83</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">84</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">85</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">86</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">17</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">18</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">19</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">20</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">21</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">22</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">23</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">24</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">25</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">26</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">27</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">28</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">29</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">30</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">31</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">32</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">33</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">34</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">35</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">36</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">37</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">38</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">39</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">40</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">41</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">42</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">43</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">44</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">45</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">46</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">47</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">48</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">49</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">50</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">51</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">52</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">53</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">54</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">55</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">56</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">57</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">58</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">59</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">60</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">61</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">62</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">63</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">64</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">65</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">66</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">67</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">68</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">69</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">70</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">71</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">72</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">73</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">74</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">75</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">76</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">77</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">78</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">79</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">80</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">81</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">82</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">83</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">84</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">85</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">86</li>
 
 </ul></pre> <h2 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:2.13em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>事件及方法 .js</h2> <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;">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();
 }
})</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">17</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">18</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">19</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">20</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">21</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">22</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">23</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">24</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">25</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">26</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">27</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">28</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">29</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">30</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">31</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">32</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">33</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">34</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">35</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">36</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">37</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">38</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">39</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">40</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">6</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">7</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">8</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">9</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">10</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">11</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">12</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">13</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">14</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">15</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">16</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">17</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">18</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">19</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">20</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">21</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">22</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">23</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">24</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">25</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">26</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">27</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">28</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">29</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">30</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">31</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">32</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">33</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">34</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">35</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">36</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">37</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">38</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">39</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">40</li>
 
 </ul></pre> <h3 style="word-wrap:break-word; margin:0.8em 0px; padding:0px; font-size:1.73em; border:0px; font-weight:100; line-height:1.3em; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;"> <a style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(79,161,219)" rel="nofollow"></a>实现思路解读及原理</h3> 
 <ol style="word-wrap:break-word; margin:1em 2em; padding:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px"> 界面解读：&nbsp; 用一个蒙层+弹窗来组成，用绑定的数据{ {showModal}}来控制弹窗的显示和隐藏 </li> 
 <li style="word-wrap:break-word; margin:0px; padding:0px; border:0px"> 事件及方法解读：&nbsp; 让弹窗显示的方法： </li> 
 </ol> <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;"> showDialogBtn: function() {
 
 this.setData({
 showModal: true
 })
 }</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 </ul></pre> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 让弹窗消失的方法： <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;"> hideModal: function () {
 
 this.setData({
 showModal: false
 });
 }</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">3</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">4</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">5</li>
 
 </ul></pre> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 这里有个要特别注意的地方，就是下面这个方法： <pre style="word-wrap: break-word; margin-top: 0px; margin-bottom: 1.1em; padding: 5px 5px 5px 60px; white-space: nowrap; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; font-family: &quot;Source Code Pro&quot;, monospace; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 0px solid rgb(136, 136, 136); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code style="word-wrap: normal; margin: 0px; padding: 0px; display: block; color: inherit; box-sizing: border-box; font-family: &quot;Source Code Pro&quot;, monospace;font-size:undefined; white-space: pre; border-radius: 0px; background: transparent;"> preventTouchMove: function () {
 
 }</code>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; opacity: 0; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 </ul>
 
 
 <ul style="word-wrap: break-word; margin: 0px; padding: 6px 0px 40px; border-width: 0px 1px 0px 0px; border-top-style: initial; border-right-style: solid; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: rgb(221, 221, 221); border-bottom-color: initial; border-left-color: initial; border-image: initial; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; text-align: right; background-color: rgb(238, 238, 238);">
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">1</li>
 
 <li style="word-wrap: break-word; margin: 0px; padding: 0px 5px; border: 0px; list-style: disc; box-sizing: border-box;">2</li>
 
 </ul></pre> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> 为什么是空方法？因为要结合界面wxml看，蒙层view里有一个事件绑定<code style="word-wrap:break-word; margin:0px; padding:2px 4px; font-family:&quot;Source Code Pro&quot;,monospace; font-size:13.5px; white-space:nowrap">catchtouchmove="preventTouchMove"</code>。这养写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话，如果主界面是一个可以滚动的界面，想想看，当弹窗弹出的时候用户还可以操作滚动列表，我想你的产品经理会来找你的。 <pre style="word-wrap:break-word; margin-top:0px; margin-bottom:10.5px; padding:10px; white-space:pre-wrap; font-family:&quot;Source Code Pro&quot;,monospace; line-height:1.45; word-break:break-all; color:rgb(51,51,51)"><code style="word-wrap:normal; margin:0px; padding:0px; font-family:&quot;Source Code Pro&quot;,monospace; font-size:undefined; color:inherit; white-space:pre; background-color:transparent"> 3. 样式解读：(这个标题没加代码块标识，但还是像代码块一样被显示了，这是个bug！！！- -)
</code></pre> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:1.1em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(63,63,63); font-family:&quot;microsoft yahei&quot;; font-size:15px; line-height:26px"> .modal-mask和.modal-dialog样式的写法需要特别注意。&nbsp; 主要是层级关系，弹窗要保证在最上层，不被界面遮挡，然后蒙层要遮挡住界面，但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。 </td> 
 </tr> 
 </tbody> 
</table>