【微信小程序】实现点击+号弹出一个附着旁边的弹窗进行多个方式的选择

在微信小程序中，你可以使用小程序的组件和事件来实现点击+号弹出一个附着在+号旁边的弹窗，以进行多个方式的选择。以下是一个示例代码：

在wxml文件中，创建一个按钮，并为按钮绑定一个点击事件：

<view class="container"><button class="add-button" bindtap="showPopup">+</button><view wx:if="{{showPopup}}" class="popup"><!-- 弹窗内容 --><view class="option">方式1</view><view class="option">方式2</view><view class="option">方式3</view></view>
</view>

在上述代码中，我们创建了一个按钮，用于展示+号图标，并给按钮绑定了一个showPopup事件。在弹窗中，我们使用wx:if条件判断来控制弹窗的显示和隐藏，如果showPopup为true，则显示弹窗内容。

在对应的js文件中，定义showPopup和hidePopup两个事件处理方法：

Page({data: {showPopup: false},showPopup: function() {this.setData({showPopup: true});},hidePopup: function() {this.setData({showPopup: false});}
})

在上述代码中，我们在Page对象中定义了data对象，其中包含一个showPopup属性，用于控制弹窗的显示和隐藏。showPopup事件处理方法通过setData方法将showPopup属性设置为true，从而显示弹窗。hidePopup事件处理方法通过setData方法将showPopup属性设置为false，从而隐藏弹窗。

在对应的wxss文件中，定义弹窗的样式：

.container {position: relative;width: 100%;height: 100%;
}.add-button {position: fixed;bottom: 20px;right: 20px;width: 50px;height: 50px;border-radius: 50%;background-color: #007AFF;color: white;font-size: 32px;line-height: 50px;text-align: center;z-index: 1;
}.popup {position: fixed;bottom: 80px;right: 20px;width: 120px;background-color: white;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);z-index: 1;
}.option {padding: 10px;font-size: 14px;color: #333333;border-bottom: 1px solid #EEEEEE;text-align: center;
}.option:last-child {border-bottom: none;
}

在上述代码中，我们定义了容器的样式，将按钮和弹窗都设置为position: fixed，使它们可以固定在屏幕上的某个位置。按钮的样式使用纯蓝色背景和白色字体，弹窗的样式使用白色背景、圆角和阴影效果。

通过以上的代码，当用户点击+号按钮时，弹窗会显示出来，用户可以在弹窗中进行多个方式的选择。当用户点击弹窗外的区域或选择了某个方式后，弹窗会隐藏起来。

希望对你有所帮助！如果还有其他问题，请随时提问。。以下是一个示例代码：

在wxml文件中，创建一个按钮，并为按钮绑定一个点击事件：

<view class="container"><button class="add-button" bindtap="showPopup">+</button><view wx:if="{{showPopup}}" class="popup"><!-- 弹窗内容 --><view class="option">方式1</view><view class="option">方式2</view><view class="option">方式3</view></view>
</view>

在对应的js文件中，定义showPopup和hidePopup两个事件处理方法：

Page({data: {showPopup: false},showPopup: function() {this.setData({showPopup: true});},hidePopup: function() {this.setData({showPopup: false});}
})

在对应的wxss文件中，定义弹窗的样式：

.container {position: relative;width: 100%;height: 100%;
}.add-button {position: fixed;bottom: 20px;right: 20px;width: 50px;height: 50px;border-radius: 50%;background-color: #007AFF;color: white;font-size: 32px;line-height: 50px;text-align: center;z-index: 1;
}.popup {position: fixed;bottom: 80px;right: 20px;width: 120px;background-color: white;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);z-index: 1;
}.option {padding: 10px;font-size: 14px;color: #333333;border-bottom: 1px solid #EEEEEE;text-align: center;
}.option:last-child {border-bottom: none;
}