微信小程序手写一个自定义弹窗

最新推荐文章于 2024-10-10 22:59:31 发布

猎潮IT

最新推荐文章于 2024-10-10 22:59:31 发布

阅读量253

点赞数 2

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_29707325/article/details/140186847

版权

首先分析弹窗的组成部分，包含头部标题栏、弹窗内容、关闭按钮，主要实现这三个部分，剩下的就是点击触发按钮显示弹窗，点击关闭按钮隐藏弹窗。

代码：

wxml页面代码：

<view wx:if="{{showRank}}" class="rank-panel">
    <view class="tile">排行榜</view>
    <view class="rankrow" >
      <view class="rankcol" >头像</view>
      <view class="rankcol" >昵称</view>
      <view class="rankcol" >徽章</view>
      <view class="rankcol" >成就</view>
    </view>
    <view  catchtap="closeRank"  class="closeRank" >关闭</view>
</view>

wxss样式代码：

.rank-panel {
  width: 90vw;
  height: 800rpx;
  position: absolute;
  top: 20vh;
  left: 5vw;
  background: linear-gradient(to bottom,#f072b6,#fff886);
  border-radius: 30rpx;
  color: white;
}
.tile{
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 20rpx;
}
.rankrow{
  width: 100%;
  height: 100rpx;
  text-align: center;
  margin-top: 10rpx;
}
.closeRank{
  color: black;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20rpx;
  font-size: 1.3em;
  font-weight: 600;
}

ts脚本代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showRank: false
  },
  showRank() {
    this.setData({
      showRank:true
    })
  },
  closeRank() {
    this.setData({
      showRank:false
    })
  }
})

效果展示