小程序自定义气泡框

郭玉齐

已于 2022-08-12 11:51:18 修改

阅读量544

点赞数

分类专栏：笔记程序代码文章标签：小程序微信

于 2022-07-22 14:53:20 首次发布

本文链接：https://blog.csdn.net/qq706352062/article/details/125932386

版权

笔记同时被 2 个专栏收录

113 篇文章 1 订阅

订阅专栏

程序代码

17 篇文章 0 订阅

订阅专栏

// wxml 
<image catchtap="eduBulletFrame" src="/images/question.png"></image>

<view class="s_explanation" wx:if="{{ifBulletFrame}}" catchtap="eduBulletFrame">满2001减1000满2001减1000满2001减1000满2001减1000满2001减1000满2001减1000满2001减1000满2001减1000满2001减1000</view>
// js
ifBulletFrame:false,
eduBulletFrame(e) {
    let ifBulletFrame = this.data.ifBulletFrame   //控制显示的参数
    this.setData({
      ifBulletFrame: !ifBulletFrame,
    })
  },

// css

.s_explanation {
  font-size: 26rpx;
  max-width: 252rpx;
  color: #333333;
  padding: 20rpx 40rpx;
  background: #ffffff;
  position: absolute;
  top: -40rpx;
  left:330rpx;
  border-radius: 12rpx;
  z-index: 10;
  box-shadow:2rpx 2rpx 8rpx 8rpx #E4E4E4;

}
.s_explanation:before{
  position: absolute;
  top: 60rpx;
  left: -10rpx;
  content: '';
  width: 20rpx;
  height: 20rpx;
  background: #ffffff;
  transform: rotate(135deg);
  box-shadow:0rpx 0rpx 8rpx 8rpx #E4E4E4;
}
.s_explanation:after{
  position: absolute;
  top: 45rpx;
  left: 0rpx;
  content: '';
  width: 35rpx;
  height: 60rpx;
  background: #fff;
}