在微信小程序中,你可以使用weui组件库来实现弹出一个确认的popup,并在其中包含图片和名称。以下是一个示例代码:
- 在wxml文件中,添加一个按钮来触发弹出确认popup:
<button bindtap="showPopup">显示确认Popup</button>
- 在wxss文件中,定义确认popup的样式:
.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,并传递图片和名称数据:
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的代码:
<!-- 确认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