【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup，其中包含图片和名称

全面解读2023-07-20 17:12

在微信小程序中，你可以使用weui组件库来实现弹出一个确认的popup，并在其中包含图片和名称。以下是一个示例代码：

在wxml文件中，添加一个按钮来触发弹出确认popup：

html 复制代码

<button bindtap="showPopup">显示确认Popup</button>

在wxss文件中，定义确认popup的样式：

css 复制代码

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-inner {
  width: 80%;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.popup-img {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.popup-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

在js文件中，编写相应的逻辑来显示和隐藏确认popup，并传递图片和名称数据：

javascript 复制代码

Page({
  data: {
    showPopup: false,
    popupImage: "",
    popupName: "",
  },

  showPopup() {
    const image = "图片链接"; // 替换为实际的图片链接
    const name = "产品名称"; // 替换为实际的产品名称

    this.setData({
      showPopup: true,
      popupImage: image,
      popupName: name,
    });
  },

  hidePopup() {
    this.setData({
      showPopup: false,
    });
  },
});

在wxml文件中，添加确认popup的代码：

html 复制代码

<!-- 确认popup -->
<view wx:if="{{showPopup}}" class="popup" bindtap="hidePopup">
  <view class="popup-inner" bindtap="stopPropagation">
    <image class="popup-img" src="{{popupImage}}"></image>
    <view class="popup-name">{{popupName}}</view>
    <button bindtap="hidePopup">确认</button>
  </view>
</view>

在这个示例中，点击按钮会触发showPopup函数，该函数会将showPopup设为true，并传递图片和名称数据。确认popup会显示图片、名称和确认按钮。当点击确认按钮或点击popup以外的区域时，hidePopup