转移中下拉框不随选择框滚动的问题

最新推荐文章于 2022-11-29 15:29:37 发布
最新推荐文章于 2022-11-29 15:29:37 发布
阅读量829 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ui ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_18714/article/details/82331528
本文提供了解决CSS浮动布局问题的方法，在main.css文件末尾添加指定代码即可实现修复。适用于div.plr20元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原来的select.js不用动，请在main.css文件的末尾加入下面一句即可：

 

/*add by ruanzhen, fix the bug of floating*/

div.plr20{position: relative;}


iteye_18714
关注
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
软件测试规范
张元礼-门道科技创始人|16年IT从业经验（抖音号：mtesting）
12-11 2523
第一部分应用程序测试 第一章界面测试 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。 1.1易用性测试...
uniapp Dropdown 下拉菜单无法滑动问题
weixin_43993613的博客
06-27 1529
uniappDropdown 下拉菜单无法滑动问题
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 4538
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
element中下拉框select在长页面滚动时，下拉弹框没有跟随下拉框跑路
热门推荐
weixin_41166682的博客
06-05 1万+
1.需求： 在页面滚动过程中，弹框并没有跟着下拉框一起跑，一直固定在那个位置 2.修改： 在tamplate中： <el-col :span="10" class="tb-row" style="float: right;"> <el-form-item label="经营性质" prop="proTypeCode"> <el-select v-model="formData.proTypeCode" placeholder="请选择经营性质" filterabl
下拉框禁止滚动（滚动不会触发onchange事件）
如果你真的想做一件事，你一定会找到方法； 如果你不想做一件事，你一定会找到借口。
09-23 520
#禁止滚动事件 [code="html"] [/code] #2个框的滚动条同步滚动 [code="html"]onscroll="document.getElementById('divhead').scrollLeft = this.scrollLeft" [/code]
在element-ui的select下拉框加上滚动加载
weixin_30498921的博客
04-17 7945
在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。 自然，后端就做了一项非常“漂亮”的交互体验数据——分页 这不分页还好，一分页对超过10条数据之后的本来也不多，就20条，偏偏还得做个分页器。（假设为10条） 此时，如果能够像购物商城那样拖拽到底部自动加载新数据就好了。...
JS下拉框内容左右移动效果的具体实现
10-27
这个效果通常用于用户界面中，让用户能够方便地在两个下拉框之间转移选项，例如选择并添加或移除项目。我们将分析提供的代码示例，并解释其中的关键点。 首先，我们有两个具有相同选项的`<select>`元素，一个名为`...
dwz下拉框左右选择实现技巧
通过上述知识点的综述，我们可以看出实现dwz下拉框左右选择功能不仅仅是一个简单的交互设计问题，它还涉及到前端技术栈的多个方面，包括HTML、CSS、JavaScript、DOM操作以及后端数据交互等。开发者需要掌握相关的...
<!-- filter-picker.wxml --> <view class="filter-picker"> <!-- 输入框部分 --> <view class="input-container" bindtap="toggleDropdown"> <input class="picker-input" placeholder="{{placeholder}}" value="{{searchText}}" bindinput="onInput" bindfocus="onFocus" bindblur="onBlur" disabled="{{disabled}}" /> </view> <!-- 下拉选项部分 --> <view class="dropdown-container" wx:if="{{dropdownVisible}}"> <scroll-view scroll-y class="dropdown-list" style="max-height: {{maxHeight}}px"> <block wx:for="{{filteredOptions}}" wx:key="key"> <view class="dropdown-item {{item.value === value ? 'selected' : ''}}" bindtap="selectItem" data-value="{{item.value}}" data-item="{{item}}" > {{item.label}} </view> </block> <view wx:if="{{filteredOptions.length === 0}}" class="no-data"> 无匹配数据 </view> </scroll-view> </view> </view> // components/filter-picker/filter-picker.js Component({ properties: { options: Array, value: String, placeholder: String, disabled: Boolean, maxHeight: { type: Number, value: 300 } }, data: { dropdownVisible: false, searchText: ‘’, filteredOptions: [], displayText: ‘’, isActive: false // 新增激活状态 }, methods: { /** * 安全更新筛选后的选项列表 * 1. 确保options是数组 * 2. 过滤掉非对象元素 * 3. 处理label属性缺失的情况 */ updateFilteredOptions() { let { options, searchText } = this.data; const emptyOption = { label: this.properties.placeholder, value: ‘’ } // 确保options是数组，如果不是则重置为空数组 if (!Array.isArray(options)) { options = []; this.setData({ options }); } // 过滤掉非对象元素 const validOptions = options.filter(item => item && typeof item === 'object' && 'label' in item ); // 如果没有搜索文本，显示所有有效选项 if (!searchText) { this.setData({ filteredOptions: [emptyOption,...validOptions] }); return; } // 安全过滤：确保item有label属性 const filtered = validOptions.filter(item => { const label = item.label || ''; return label.toString().toLowerCase().includes(searchText.toLowerCase())&&(item.value&&item.value!=''); }); this.setData({ filteredOptions: [emptyOption,...filtered] }); }, /** * 安全更新显示文本 * 1. 处理无效值 * 2. 处理找不到匹配项的情况 */ updateDisplayText() { const { value, options } = this.data; // 确保options是有效数组 if (!Array.isArray(options) || options.length === 0) { this.setData({ displayText: '' }); return; } // 处理空值 if (!value) { this.setData({ displayText: '' }); return; } // 查找匹配项，忽略非对象元素 const selected = options.find(item => item && typeof item === 'object' && item.value === value ); if (selected) { this.setData({ displayText: selected.label || '', searchText: selected.label || '' }); } else { this.setData({ displayText: '' }); } }, /** * 处理输入事件 * @param {Object} e - 事件对象 * @param {string} e.detail.value - 输入框的值 */ onInput(e) { const searchText = e.detail.value; this.setData({ searchText }, () => { this.updateFilteredOptions(); }); }, /** * 当输入框获得焦点时的处理函数 * - 如果组件被禁用则直接返回 * - 设置下拉框可见状态、搜索文本和激活状态 * - 更新过滤后的选项列表 */ onFocus() { if (this.data.disabled) return; this.updateFilteredOptions(); }, /** * 处理输入框失去焦点事件 * 延迟200毫秒后隐藏下拉框并取消激活状态 */ onBlur() { }, /** * 切换下拉框的显示/隐藏状态 * 如果组件被禁用则不做任何操作 * 当下拉框显示时会触发更新过滤选项的操作 */ toggleDropdown() { if (this.data.disabled) return; this.setData({ dropdownVisible: !this.data.dropdownVisible, isActive: !this.data.dropdownVisible }, () => { if (this.data.dropdownVisible) { this.updateFilteredOptions(); } }); }, /** * 处理选择项事件 * @param {Object} e - 事件对象 * @param {Object} e.currentTarget.dataset - 事件目标数据 * @param {string} e.currentTarget.dataset.value - 选中项的值 * @param {Object} e.currentTarget.dataset.item - 选中项对象 * @param {string} e.currentTarget.dataset.item.label - 选中项的显示文本 * @fires change - 触发change事件，传递选中项的值和对象 */ selectItem(e) { const { value, item } = e.currentTarget.dataset; if(!value){ this.setData({ value, displayText: '', searchText: "", dropdownVisible: false, isActive: false }); }else{ this.setData({ value, displayText: item.label, searchText: item.label, dropdownVisible: false, isActive: false }); } this.triggerEvent('change', { value, item }); } }, // 添加值观察器 observers: { ‘value’: function(newVal) { this.updateDisplayText(); } }, ready() { this.updateFilteredOptions(); this.updateDisplayText(); } }); 再用户滚动下拉框选项时，阻止输入框失去焦点，点击下拉框和输入框以外得 地方会关闭下拉框
最新发布
08-05
我们可以通过在下拉框的触摸事件中调用`e.stopPropagation()`来阻止事件冒泡，这样就不会触发输入框的blur事件（因为blur事件是由其他机制触发的，比如点击其他地方，但滚动时通常不会触发blur，问题可能在于滚动时...
弹出框随着页面滑动条滑动
赱乂的博客
06-09 2898
float:right; 层位于右侧 position:absolute; right:20px; top:20px; 这样是相对固定的。 z-index:100px; 层级于上层。 JS jquery 调用，随鼠标移动，层跟着移动。 $("#rel_div").css("top", $(document).scrollTop()+20 );//将滚动条高度赋给悬浮框。
layerdate时间控件不随着input框的滚动移动
qq_36178165的博客
02-12 2174
如题，只需在laydate时间控件所在的页面头部添加一个样式 body{ height:auto; } 即可
js控制多选框上下移动
孤独剑的架构师之路
04-28 839
 1 2 3 4 5  function goo(i){  var si = select1.selectedIndex;  var ops = select1.options;  if(si+i>=0 && ops[si+i] && ops[si]){    ops[si+i].swapNode(ops[si]);  }} 
实现下拉选择框内滚动条以提高可操作性
在Web开发中，下拉选择框是一种常见的表单元素，用于向用户提供一系列可选的值。...在进行实现时，还应考虑到浏览器兼容性问题，并做好相应的测试工作，确保下拉选择框的滚动条在所有主流浏览器中表现一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值