- 当前 Bug 的表现(可附上截图)
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
<scroll-view style='height:200px;' scroll-y="true" class="article" scroll-with-animation="true" enable-back-to-top="false" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{brain}}" >
<image class='left-arrow' src="https://preview.qiantucdn.com/58picmark/original_origin_pic/34/73/30/07358PICE9xDAjIY5weV3MaRk.png!w1024_small" wx:if="{{swiperType}}" class="left-arrow" catchtap="toUp" />
<image class='right-arrow' src="https://preview.qiantucdn.com/58picmark/element_origin_pic/33/62/15/86f58PICYbpa4EtbzmktzMaRk.png!w1024_small" wx:if="{{swiperType}}" class="right-arrow" catchtap="down" />
<view class="articleList" wx:for="{{[1,2,3,4,5]}}" wx:key="index" id='brain{{index}}'>
<view class="tower">
<label>悬疑</label>
<text>{{index+1}}楼</text>
</view>
<view class="content">
<text space='nbsp'> 森林深处有一间小木屋,里面住着一位白发苍苍的老爷爷,小木屋显得独一无二,因为孤身一人的老爷爷,经营着森林里唯一的水果铺。和蔼善良让老爷爷的生意不错,森林里的小动物都喜欢光顾他的小店,也喜欢和老爷爷一起晒晒太阳,聊聊天。它们给老爷爷带来的森林里种种有趣的事情,常常把老爷爷逗笑得胡子都飞了起来,生活再也不会像秋天的落叶一样。</text>
</view>
<view class="foot">
<view>
<icon type="success_no_circle" size="40"/>
<text>填脑洞</text>
</view>
<view>
<icon type="success_no_circle" size="40"/>
<text>200</text>
</view>
<view>
<icon type="success_no_circle" size="40"/>
<text>1k</text>
</view>
</view>
</view>
</scroll-view>
.article {
padding-top: 20rpx;
overflow:hidden;
}
.left-arrow {
position: fixed;
left: 0;
top: 60%;
width: 40rpx;
height: 40rpx;
}
.right-arrow {
position: fixed;
right: 0;
top: 60%;
width: 40rpx;
height: 40rpx;
}
.articleList {
padding-top: 10rpx;
margin: auto;
margin-bottom: 24rpx;
width: 84%;
background:rgba(255,255,255,1);
box-shadow:0rpx 0rpx 10rpx 0rpx rgba(153,153,153,1);
border-radius: 10rpx;
}
.tower {
width: 100%;
font-size: 28rpx;
padding: 60rpx 40rpx 32rpx 40rpx;
}
.tower text {
color:rgba(153,153,153,1);
line-height: 40rpx;
float: right;
margin-right: 70rpx;
}
.tower label {
border: 2rpx solid #8E7037;
padding: 4rpx 20rpx;
color: #8E7037;
}
.content {
width: 88%;
font-size: 34rpx;
color:rgba(51,51,51,1);
line-height: 42rpx;
min-height: 450rpx;
letter-spacing: 2rpx;
margin: auto;
}
.foot {
display: -webkit-flex;
justify-content: space-between;
padding: 22rpx 40rpx;
}
.foot view image {
width: 44rpx;
height: 44rpx;
margin-right: 10rpx;
}
.foot view text {
color: #666666;
font-size: 32rpx;
}
data: {
articleList: [
],
swiperType: false, //楼层上下切换图片显示
scrollTop: 0,//楼层滚动距离顶部高度
scrollHeight: 0,//整个楼层高度
},
//楼层滚动监听
scroll: function (e) {
if (e.detail.scrollTop > 300) {
this.setData({
swiperType: true
})
} else {
this.setData({
swiperType: false
})
}
this.setData({
scrollTop: e.detail.scrollTop
})
this.setData({
scrollHeight: e.detail.scrollHeight
})
},
//上一楼层
toUp: function (e) {
let height = this.data.scrollHeight / this.data.articleList.length;
if (parseInt((this.data.scrollTop / 320).toString()) == 1) {
this.setData({
brain: 'brain0'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 2) {
this.setData({
brain: 'brain1'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 3) {
this.setData({
brain: 'brain2'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 4) {
this.setData({
brain: 'brain3'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 5) {
this.setData({
brain: 'brain4'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 6) {
this.setData({
brain: 'brain5'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 7) {
this.setData({
brain: 'brain6'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 8) {
this.setData({
brain: 'brain7'
})
}
},
//下一楼层
down: function (e) {
let height = this.data.scrollHeight / this.data.articleList.length;
if (parseInt((this.data.scrollTop / 320).toString()) == 1) {
this.setData({
brain: 'brain2'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 2) {
this.setData({
brain: 'brain3'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 3) {
this.setData({
brain: 'brain4'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 4) {
this.setData({
brain: 'brain5'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 5) {
this.setData({
brain: 'brain6'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 6) {
this.setData({
brain: 'brain7'
})
} else if (parseInt((this.data.scrollTop / 320).toString()) == 7) {
this.setData({
brain: 'brain8'
})
}
},
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
能不能尽快回复滚动条消失的问题,已经看到很多人在问了,官方都不理睬
代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)先提供下
https://developers.weixin.qq.com/s/7yiBOgm2749f
工具真机均未复现问题,测试机型iPhonexr,微信版本:7.0.4,小米note3,微信版本:7.0.4
iphone7和iphone8p 测试均出现该问题,页面初次加载有滚动条。但是加载下一组数据后,滚动条就消失