微信小程序弹窗

置顶

蒜鸟小窝

已于 2022-11-19 00:38:32 修改

阅读量1.7w

点赞数 66

分类专栏：微信小程序文章标签：微信小程序 javascript 前端

于 2022-11-19 00:29:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45465881/article/details/127931495

版权

微信小程序自定义底部、顶部、中间、左边、右边弹窗
简单的微信小程序弹窗功能，具体实现过程，请浏览代码。
点击事件
顶部弹出窗图例：
页面顶部弹出
中间弹出窗图例：
中部弹窗
底部弹出窗图例：
底部弹窗
左边弹出窗图例：

右边弹出窗图例：

wxml代码

<button type="primary" bindtap="openPopup" data-index="0">打开顶部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="1">打开中间弹窗</button>
<button type="primary" bindtap="openPopup" data-index="2">打开底部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="3">打开左边弹窗</button>
<button type="primary" bindtap="openPopup" data-index="4">打开右边弹窗</button>
<!-- 顶部弹窗 -->
<view class="popup-box" wx:if="{
    {showIndex=='0'}}" bindtap="closePopup"></view> 
<view class="info-top" wx:if="{
    {showIndex=='0'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，不尽长江滚滚来。</view>
    <view>万里悲秋常作客，百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class="right-btn">确认</view>