微信小程序 - - - - - scrill-view内元素使用fixed无效问题

scrill-view内元素使用fixed无效问题

• 1. 问题描述
• 2. 解决思路
• • 2.1 问题拆分
  • 2.2 解决问题
• 3. 代码展示

scroll-view 标签是很常用的标签组件。
在滚动一定距离时，menu菜单置相对于浏览器窗口固定位置也是很常见的需求。

1. 问题描述

但是当二者结合使用就会出现问题：

scroll-view内部的fixed属性并不是相对于窗口，而是scroll-view标签

微信小程序文档 : scrill-view

那么该如何解决该问题呢？

2. 解决思路

2.1 问题拆分

• fixed定位仍然是有效，非期望效果
• fixed定位对照元素发生改变

2.2 解决问题

所以根据 2.1 ，我们可知问题关键在于定位对照元素发生改变。

问题所在已经找到，就能针对性解决问题

• 将scroll-view组件内期望fixed定位的元素在scroll-view组件之前进行备份，条件展示
• 在scroll-view组件滚动一定距离后修改上述条件，使备份组件进行展示

3. 代码展示

期望效果：

当滚动距离超过banner高度200rpx时，将分类列表使用fixed固定在指定位置

****.html
<view>
	<!-- 备份的分类组件 -->
	<block wx:if="{{is_fixed}}">
		<view wx:for="{{categoryList}}" wx:key="id" data-id='{{}}'>
		  {{}}
		</view>
	</block>

	<!-- 滚动视图容器 -->
    <scroll-view 
      scroll-y="true" 
      style="height:calc(100% - 10rpx)" 
      show-scrollbar='{{true}}' 
      enhanced='{{true}}' 
      bindscrolltoupper="upper" 
      bindscrolltolower="lower" 
      bindscroll="scroll" 
      scroll-into-view="{{toView}}" 
      scroll-top="{{topNum}}" 
      refresher-enabled='true' 
      refresher-default-style="black" 
      refresher-triggered='{{triggered}}' 
      bindrefresherpulling="onPulling" 
      bindrefresherrefresh="onRefresh" 
      bindrefresherrestore="onRestore" 
      bindrefresherabort="onAbort"
    >
    	 <view style="height: 200rpx;"> banner <view>
    	 <!-- 分类组件 -->
         <view wx:for="{{categoryList}}" wx:key="id" data-id='{{}}'>
           {{}}
         </view>
         <view style="height: 200rpx;"> footer <view>
    </scroll-view>
 </view>

 - - - -
 - - - -
 ****.js
<script>
  data: {
	is_fixed: false,
	scroll_height: 200, // 对照滚动高度
  },
	
  // 划动事件
  scroll(e) {
    const {
      scroll_height
    } = this.data
    if (e.detail.scrollTop >= scroll_height) {
      this.setData({
        is_fixed: true
      })
    } else {
      this.setData({
        is_fixed: false
      })
    }
  },
</script>

如此即可解决fixed错误问题