微信小程序自定义选择框，选择相应的名称

最新推荐文章于 2025-05-02 10:26:54 发布

原创最新推荐文章于 2025-05-02 10:26:54 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于微信小程序的社区选择组件实现方法。通过点击文本触发自定义选择框，并利用遮罩层防止误触页面其他区域。该组件使用了data属性进行状态管理，包括展示与隐藏选择框，并通过事件绑定实现了社区选项的选择与更新。

index.wxml

<view class='fl sstring' bindtap='shequChange'>{{shequstring}}</view>

在index.js的data中添加默认文字

shequstring: "所有社区",

<!-- 小的灰色遮盖 -->
<view class="zhegai hide {{sqView? 'block' : ''}}" bindtap="sqquxiao"></view>
<!-- 自定义选择框，从后台获取for循环 -->
<view class="shequ hide {{sqView? 'block' : ''}}">
<view class='sq-title'>请选择社区</view>
<scroll-view class="sq-content" scroll-y>
<view wx:for="{{arraysq}}" class="sq-view" data-id="{{item.id}}" data-text="{{item.name}}" bindtap="sqxz">{{item.name}}</view>
</scroll-view>
</view>

思路：

点击sstring，显示灰色遮盖，弹出自定义选择框，点击选择框理的内容或点击遮盖，shequstring内容发生相应变化

data: {
shequstring: "所有社区",
sqView: false,
},






shequChange: function (e) {
var that = this;
that.setData({
sqView: true,
})
},
sqquxiao: function (e) {
this.setData({
sqView: false,
})
},

sqxz: function (e) {
this.setData({
shequstring: e.currentTarget.dataset.text,
sqView: false,
})
wx.setStorageSync('rejion_id', e.currentTarget.dataset.id)
var that=this;
close(that);
bmfun(that);
},