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

效果

代码

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
    });
  }
});
相关推荐
希忘auto2 小时前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE18 小时前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king18 小时前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐6 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui6 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng9267 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20217 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒8 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang20218 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节
一个通信老学姐8 天前
专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节