微信小程序:点击按钮出现右侧弹窗

效果

代码

wxml

html 复制代码
<!-- 弹窗信息 -->
<view class="popup-container" wx:if="{{showPopup}}">
  <view class="popup-content">
    <!-- 弹窗内容 -->
    <text>这是一个右侧弹窗</text>
  </view>
</view>
<!-- 遮罩层 -->
<view class="popup-mask"  wx:if="{{showPopup}}" bindtap="hidePopup"></view>
<!-- 点击出现弹窗的按钮 -->
<button bindtap="showPopup">显示弹窗</button>

wxss

css 复制代码
.popup-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  background-color: #fff;
  z-index: 9999;
  border-bottom-left-radius: 15rpx;
  border-top-left-radius: 15rpx;
}

.popup-content {
  padding: 20rpx;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

js

javascript 复制代码
Page({
  data: {
    showPopup: false
  },
  showPopup: function () {
    this.setData({
      showPopup: true
    });
  },
  hidePopup: function () {
    this.setData({
      showPopup: false
    });
  }
});
相关推荐
lzb_kkk17 天前
【MFC】编辑框、下拉框、列表控件
c语言·开发语言·c++·mfc·1024程序员节
lzb_kkk18 天前
【MFC】树控件的使用详解
开发语言·c++·windows·mfc·1024程序员节
SizeTheMoment1 个月前
List介绍
1024程序员节
开利网络1 个月前
产业互联网+三融战略:重构企业增长密码
大数据·运维·服务器·人工智能·重构·1024程序员节
wei_shuo2 个月前
从数据中台到数据飞轮:实现数据驱动的升级之路
1024程序员节·数据飞轮
玖剹2 个月前
矩阵区域和 --- 前缀和
数据结构·c++·算法·leetcode·矩阵·动态规划·1024程序员节
jamison_13 个月前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
NaZiMeKiY3 个月前
HTML5前端第六章节
前端·html·html5·1024程序员节
jamison_13 个月前
颠覆未来:解锁ChatGPT衍生应用的无限可能(具体应用、功能、付费模式与使用情况)
ai·chatgpt·1024程序员节
NaZiMeKiY3 个月前
HTML5前端第七章节
1024程序员节