上拉刷新触底后导致固定头部的横向滚动的内容不显示
发布于 6 年前 作者 tao25 10953 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  • 预期表现
  • 复现路径  没有上线不能复现
  • 提供一个最简复现 Demo

main.wxml

 

<view class=“main-wrapper” wx:if="{{!showModalStatus && subjectList.length}}">

<view class=“subject-wrapper clearfix”>

<view class=“more-view” bindtap=“showModal”>

<image src="…/images/more.png"></image>

</view>

<scroll-view scroll-x=“true” class=“scroll-view” scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">

<block wx:for="{{subjectList}}" wx:for-item=“subject” wx:key=“subject.SUBJECT_ID”>

<view class=“scroll-view-item {{subject.cls}} {{subject.active?‘active’:’’}}”  bindtap=‘toGetSubNews’ data-value="{{subject.SUBJECT_ID}}" data-index="{{index}}">

<text>{{subject.SUB_SHORT_NAME}}</text>

</view>

</block>

</scroll-view>

</view>

</view>

main.wxss

.main-wrapper {

position:fixed;

top:0;

width:100%;

z-index:2;

border-bottom: 5px solid #F1F1F1;

}

.subject-wrapper {

background: #fff;

padding: 0 13px;

}

.subject-wrapper .more-view {

float: right;

}

.subject-wrapper .more-view image {

width: 14px;

height: 13px;

display: inline-block;

margin-top:11px;

}

.scroll-view {

white-space: nowrap;

width:94%;

padding:5px 0px 5px 0px;

font-size:14px;

}

.scroll-view-item {

height: 30px;

line-height:24px;

display: inline-block;

position: relative;

margin-right: 15px;

}

.scroll-view-item:last-child{

margin-right: 0;

}

.scroll-view-item.tips::before {

content: ‘’;

display: inline-block;

background: #F7614E;

width: 5px;

height: 5px;

border-radius: 100%;

position: absolute;

right: -5px;

top: 0px;

z-index: 1;

}

.scroll-view-item.active::after {

content: ‘’;

display: inline-block;

background: #F7614E;

border-radius: 1px;

height: 3px;

width: 28px;

position: absolute;

top: 80%;

left: 50%;

margin-left: -14px;

}

main.js

onReachBottom: function () {

console.log(‘onReachBottom’);

// 如果是选择学科页面不请求数据

if (this.data.showModalStatus) {

return;

}

let page = this.data.page + 1;

this.setData({

page: page,

loadMore: true

});

console.log(this.data.page);

if (!this.data.subId) {

this.getTodayNews();

} else {

this.getSubNews(this.data.subId);

}

}

但是没有触发该操作

该功能在iOS上有问题。下拉触底后头部学科内容全部消失,松开后又显示出来,但是头部学科内容如果小于10条,不会出现该情况,

求解。

3 回复

已上线。搜索‘掌上学术人’选择华中师范大学,首页即可重现该bug

咋说啊,我也遇到了。把scroll-x=“true” 去掉就ok了。你尝试一下是不是scroll-x="true"问题

出现同样为题,顶部 Fixed 部分有个横向scroll-view 当页面滚动到底部继续向上拉时scroll-view中的内容就消失不见了,松开又恢复了

回到顶部