收藏
回答

scroll-view bindscroll="scroll" 失效

用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*/



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

1 个回答

  • Novalley
    Novalley
    2019-01-12

    知道原因了!

    太艰辛了!!!!

    本页面引入了

    @import "/wxParse/wxParse.wxss";


    此wxss里面

    view{

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

    }

    影响了 去掉就行了

    2019-01-12
    赞同
    回复
登录 后发表内容