微信小程序：自定义滚动弹窗

最新推荐文章于 2024-04-20 18:09:58 发布

原创

最新推荐文章于 2024-04-20 18:09:58 发布 · 置顶 · 4.6k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #小程序

微信小程序自带弹窗功能有限，难以满足需求。本文介绍了自定义滚动弹窗的实现，给出了wxml、wxss和js代码，且代码中的data内容可动态获取，拿来即可使用。

微信小程序：自定义滚动弹窗

微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图：
在这里插入图片描述

实现代码：
wxml:

<button class="showModal" bindtap="showModal_click">唤出弹窗</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-title-sc">副标题</view>
  <view class="modal-content">
    <scroll-view scroll-y="true" style="height:100px;">
      <block wx:for="{
    
    {data}}" wx:key="id">
        <button class="info">
          <