收藏
回答

上拉刷新触底后导致固定头部的横向滚动的内容不显示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 工具 6.7.4 2.3.0

- 当前 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条,不会出现该情况,

求解。

最后一次编辑于  2018-12-06
回答关注问题邀请回答
收藏

3 个回答

  • xiaochi
    xiaochi
    2018-12-06

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


    2018-12-06
    有用 1
    回复
  • Chuan
    Chuan
    2019-01-07

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

    2019-01-07
    有用
    回复 1
    • Chuan
      Chuan
      2019-01-07

      scroll-x="true" scroll-y="false"

      建议配套使用。试试

      2019-01-07
      回复
  • 2018-12-16

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


    2018-12-16
    有用
    回复
登录 后发表内容