scroll-view bindscroll="scroll" 失效
发布于 5 年前 作者 shenyan 1269 次浏览 来自 问答

用scroll-view做分页处理

但是bindscroll绑定函数 无效(我在写静态页面的时候,是可以拖动的,打印出来值,但是在渲染层就不行)

求解

下图是自己写的静态

这是渲染出来的效果

源码如下:

wxml

<view class=‘flex page_con’>

<text class=‘page_list’ decode=‘true’ bindtap=“pageM” data-ori=“leftM”>&lt;</text>

<view class=‘page_num’>

<scroll-view class=“scroll-view_H” scroll-left="{{scrollLeft}}" scroll-x=“true” bindscroll=“scroll” style=“width: 100%”>

<view class=“scroll-view-item_H”>

<text wx:for=’{{lessonnumbers}}’ wx:key=’’ class=‘page_list {{lessonnumber==item?“active”:""}}’ bindtap=‘changeNum’ data-num=’{{item}}’>{{item}}</text>

</view>

</scroll-view>

</view>

<text class=‘page_list’ decode=‘true’ bindtap=“pageM” data-ori=“rightM”>&gt;</text>

</view>

js

changeNum: function (e) {

this.setData({

lessonnumber: e.target.dataset.num

})

this.req_answerlist();

},

pageM:function(e) {

//  console.log(e.currentTarget.dataset.ori);

var that = this;

if (e.currentTarget.dataset.ori === ‘leftM’) {

if (1 < that.data.lessonnumber && that.data.lessonnumber <= that.data.maxlessonnumber) {

that.setData({

scrollLeft: that.data.scrollLeft - 20,

lessonnumber: parseInt(that.data.lessonnumber) - 1

})

}

} else {

if (0 < that.data.lessonnumber && that.data.lessonnumber < that.data.maxlessonnumber) {

that.setData({

scrollLeft: that.data.scrollLeft + 20,

lessonnumber: parseInt(that.data.lessonnumber) + 1

})

}

}

this.req_answerlist();

},

//页面滚动

scroll: function (e) {

console.log(e.detail.scrollLeft)

this.setData({

scrollLeft: e.detail.scrollLeft

})

},

wxss

/*page*/

.page_con{

background: #fff;

justify-content: space-between;

padding: 20rpx;

}

.page_list{

width: 48rpx;

height: 48rpx;

border: 1rpx solid #209ee4;

border-radius: 50%;

text-align: center;

line-height: 48rpx;

font-size: 30rpx;

color: #209ee4;

}

.page_list.active{

background: #209ee4;

color: #fff;

}

.page_num{

width: 82%;

display: flex;

justify-content: space-between;

position: relative;

top: -2rpx;

}

.scroll-view_H .page_list{

display: inline-block;

margin-right:20rpx;

}

.scroll-view_H{

white-space: nowrap;

}

.scroll-view-item_H{

display: inline-block;

width: 100%;

}

/*page end*/

1 回复

知道原因了!

太艰辛了!!!!

本页面引入了

@import “/wxParse/wxParse.wxss”;

此wxss里面

view{

word-break:break-all; overflow:auto;

}

影响了 去掉就行了

回到顶部