微信小程序：带输入栏的选择项蒙版弹窗
有一段时间没弄小程序了，现在新增一需求，需要在点击取消按钮时选择取消原因。于是，又开始折腾...
蒙版实现
看到这个需求，第一想法是点击后弹出一个蒙版弹窗，里面带有选择项按钮。于是，在之前的页面上，增加一个半透的view，在这个view中添加想要的各种控件。
于是,在wxml中加入：
|
1 2 |
<view <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'maskWindow'</span> /> |
css为：
|
1 2 3 4 5 6 7 8 9 10 |
<span class="hljs-selector-class">.maskWindow</span>{ <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">background-color</span>:<span class="hljs-built_in">rgba</span>(0, 0, 0, .2); <span class="hljs-attribute">z-index</span>: <span class="hljs-number">2</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; } |
底部窗体
我们想让内容显示在最底部，于是改为：
|
1 2 3 4 5 6 |
<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindow'</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowContent'</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span>></span>itlao5.com<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
css增加：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="hljs-selector-class">.maskWindowContent</span> { <span class="hljs-attribute">padding</span>: <span class="hljs-number">20</span>rpx <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">background</span>: <span class="hljs-number">#ffffff</span>; <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">flex-direction</span>: column; <span class="hljs-attribute">justify-content</span>: space-around; <span class="hljs-attribute">align-items</span>: center; <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>; } |
最终效果
我们还需要增加一些其他功能，如点击蒙版区域自动消息、移除蒙版下方原页面的滑动事件、只有点击某按钮才显示蒙版弹窗、取消原因分两列显示，点击其他原因可手动输入等...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindow'</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{isMaskWindowShow}}"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'maskWindowBgClick'</span> <span class="hljs-attr">catchtouchmove</span>=<span class="hljs-string">'move'</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowContent'</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'clickTap'</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"maskWindowTitleText"</span> ></span>取消原因（可选）<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowList'</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">'{{maskWindowList}}'</span> <span class="hljs-attr">wx:for-index</span>=<span class="hljs-string">'index'</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">'{{index%2===0}}'</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"maskWindowText {{index == selectIndex? 'maskWindowText_selected' : 'maskWindowText_unselected'}}"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'maskWindowTableSelect'</span> <span class="hljs-attr">data-window-Index</span>=<span class="hljs-string">'{{index}}'</span>></span>{{maskWindowList[index]}}<span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"maskWindowText {{index + 1 == selectIndex? 'maskWindowText_selected' : 'maskWindowText_unselected'}}"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'maskWindowTableSelect'</span> <span class="hljs-attr">data-window-Index</span>=<span class="hljs-string">'{{index+1}}'</span>></span>{{maskWindowList[index+1]}}<span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowInputView'</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowInput'</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">'100'</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">'请输入其他原因'</span> <span class="hljs-attr">hidden</span>=<span class="hljs-string">'{{!isMaskWindowInputShow}}'</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">'maskWindowInput'</span>></span><span class="hljs-tag"></<span class="hljs-name">input</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowBtnView'</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowBtn'</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'maskWindowOk'</span>></span>确定<span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'maskWindowBtn'</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">'maskWindowCancel'</span>></span>取消<span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
css为：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.maskWindow{ <span class="hljs-symbol">height:</span> <span class="hljs-number">100</span> %; <span class="hljs-symbol">width:</span> <span class="hljs-number">100</span> %; <span class="hljs-symbol">position:</span> fixed; background - <span class="hljs-symbol">color:</span> rgba(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>); z - <span class="hljs-symbol">index:</span> <span class="hljs-number">2</span>; <span class="hljs-symbol">top:</span> <span class="hljs-number">0</span>; <span class="hljs-symbol">left:</span> <span class="hljs-number">0</span>; } .maskWindowContent { <span class="hljs-symbol">padding:</span> <span class="hljs-number">20</span>rpx <span class="hljs-number">0</span>; <span class="hljs-symbol">width:</span> <span class="hljs-number">100</span> %; <span class="hljs-symbol">background:</span> <span class="hljs-comment">#ffffff;</span> <span class="hljs-symbol">display:</span> flex; flex - <span class="hljs-symbol">direction:</span> column; justify - <span class="hljs-symbol">content:</span> space - around; align - <span class="hljs-symbol">items:</span> center; <span class="hljs-symbol">position:</span> fixed; <span class="hljs-symbol">bottom:</span> <span class="hljs-number">0</span>; } .maskWindowTitleText { <span class="hljs-symbol">padding:</span> <span class="hljs-number">10</span>rpx <span class="hljs-number">20</span>rpx; <span class="hljs-symbol">margin:</span> <span class="hljs-number">10</span>rpx; font - <span class="hljs-symbol">size:</span> <span class="hljs-number">16</span>px; <span class="hljs-symbol">width:</span> <span class="hljs-number">80</span> %; } .maskWindowList { <span class="hljs-symbol">width:</span> <span class="hljs-number">80</span> %; <span class="hljs-symbol">display:</span> flex; flex - <span class="hljs-symbol">direction:</span> row; } .maskWindowText { <span class="hljs-symbol">padding:</span> <span class="hljs-number">10</span>rpx <span class="hljs-number">20</span>rpx; <span class="hljs-symbol">margin:</span> <span class="hljs-number">8</span>rpx; <span class="hljs-symbol">width:</span> <span class="hljs-number">50</span> %; font - <span class="hljs-symbol">size:</span> <span class="hljs-number">14</span>px; border - <span class="hljs-symbol">radius:</span> <span class="hljs-number">10</span>rpx; } .maskWindowText_selected { <span class="hljs-symbol">border:</span> <span class="hljs-number">1</span>px solid <span class="hljs-comment">#15c261;</span> } .maskWindowText_unselected { <span class="hljs-symbol">border:</span> <span class="hljs-number">1</span>px solid lightgray; } .maskWindowInputView { <span class="hljs-symbol">width:</span> <span class="hljs-number">80</span> %; } .maskWindowInput { <span class="hljs-symbol">margin:</span> <span class="hljs-number">15</span>rpx <span class="hljs-number">0</span>; <span class="hljs-symbol">padding:</span> <span class="hljs-number">10</span>rpx <span class="hljs-number">20</span>rpx; font - <span class="hljs-symbol">size:</span> <span class="hljs-number">14</span>px; <span class="hljs-symbol">border:</span> <span class="hljs-number">1</span>px solid lightgray; border - <span class="hljs-symbol">radius:</span> <span class="hljs-number">10</span>rpx; } .maskWindowBtnView { <span class="hljs-symbol">width:</span> <span class="hljs-number">80</span> %; margin - <span class="hljs-symbol">top:</span> <span class="hljs-number">20</span>rpx; <span class="hljs-symbol">display:</span> flex; flex - <span class="hljs-symbol">direction:</span> row; justify - <span class="hljs-symbol">content:</span> flex - <span class="hljs-keyword">end</span>; } .maskWindowBtn { <span class="hljs-symbol">padding:</span> <span class="hljs-number">10</span>rpx <span class="hljs-number">50</span>rpx; <span class="hljs-symbol">margin:</span> <span class="hljs-number">20</span>rpx; font - <span class="hljs-symbol">size:</span> <span class="hljs-number">14</span>px; border - <span class="hljs-symbol">radius:</span> <span class="hljs-number">10</span>rpx; <span class="hljs-symbol">border:</span> <span class="hljs-number">1</span>px solid <span class="hljs-comment">#15c261;</span> } |
|
1 2 |
当然还需要js进行控制： |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<span class="hljs-comment">/** * 页面的初始数据 */</span> data: { <span class="hljs-attr">isMaskWindowShow</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">maskWindowList</span>: [<span class="hljs-string">'时间太早'</span>, <span class="hljs-string">'时间太晚'</span>, <span class="hljs-string">'距离太远'</span>, <span class="hljs-string">'交通不方便'</span>, <span class="hljs-string">'其他（输入）'</span>, <span class="hljs-string">'没有原因'</span>], <span class="hljs-attr">selectIndex</span>: <span class="hljs-number">-1</span>, <span class="hljs-attr">isMaskWindowInputShow</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">maskWindowInputValue</span>: <span class="hljs-string">""</span> }, <span class="hljs-comment">//弹框以外区域点击</span> maskWindowBgClick: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">this</span>.dismissMaskWindow(); }, <span class="hljs-comment">//弹窗区域点击事件</span> clickTap: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ }, <span class="hljs-comment">//切换选择项事件</span> maskWindowTableSelect: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">var</span> index = e.currentTarget.dataset.windowIndex; <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">selectIndex</span>: e.currentTarget.dataset.windowIndex, <span class="hljs-attr">isMaskWindowInputShow</span>: index == <span class="hljs-number">4</span> }) }, <span class="hljs-comment">//输入框输入绑定事件</span> maskWindowInput: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">var</span> value = e.detail.value; <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">maskWindowInputValue</span>: value }) }, <span class="hljs-attr">maskWindowOk</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">var</span> index = <span class="hljs-keyword">this</span>.data.selectIndex; <span class="hljs-keyword">var</span> text; <span class="hljs-keyword">if</span> (index >= <span class="hljs-number">0</span> && index < <span class="hljs-number">4</span>) { text= <span class="hljs-keyword">this</span>.data.maskWindowList[index]; } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (index == <span class="hljs-number">4</span>) { text = <span class="hljs-keyword">this</span>.data.maskWindowInputValue; } <span class="hljs-keyword">else</span> { text = <span class="hljs-string">""</span>; } <span class="hljs-keyword">this</span>.cancel(text); <span class="hljs-comment">// 真正的取消操作</span> <span class="hljs-keyword">this</span>.dismissMaskWindow(); }, <span class="hljs-attr">maskWindowCancel</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">this</span>.dismissMaskWindow(); }, <span class="hljs-comment">// 显示蒙版弹窗</span> showMaskWindow: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">isMaskWindowShow</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">selectIndex</span>: <span class="hljs-number">-1</span>, <span class="hljs-attr">isMaskWindowInputShow</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">maskWindowInputValue</span>: <span class="hljs-string">""</span> }) }, <span class="hljs-comment">// 隐藏蒙版窗体</span> dismissMaskWindow: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">isMaskWindowShow</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">selectIndex</span>: <span class="hljs-number">-1</span>, <span class="hljs-attr">isMaskWindowInputShow</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">maskWindowInputValue</span>: <span class="hljs-string">""</span> }) } |
在使用，通过点击原页面“取消”按钮，调用this.showMaskWindow()即可显示该蒙版弹窗。
简书：ThinkinLiu 博客: IT老五
这些差不多算是全部代码了，当然如果想看完整的，点下面链接进入：
Github源码： https://github.com/ThinkinLiu/MaskWindow
