小程序scroll-view 實現大圖滾動顯示總結

有一張大圖寬度較大, 一個屏幕展現不開, 須要自動滾動

scrollview顯示 wxml

<scroll-view  scroll-x="true" style="height: {{imageHistoryRect.height}};" bindscrolltoupper="upper"
                 bindscrolltolower="onToLower"
                 bindscroll="onScroll" scroll-left="{{scrollLeft}}">
        <image bindload="onImageLoad" style="width:{{ imageHistoryRect.width }}px; height:{{ imageHistoryRect.height }}px;"
               src="http://kookong.com/static/img/aboutme.png"></image>
    </scroll-view>

js中獲取圖片真實寬高, 並設置奧scroll-view和image

onImageLoad: function (e) {
        var $width = e.detail.width,    //獲取圖片真實寬度
            $height = e.detail.height,
            ratio = $width / $height;    //圖片的真實寬高比例
        var viewWidth = 718,           //設置圖片顯示寬度，左右留有16rpx邊距
            viewHeight = 718 / ratio;    //計算的高度值
        console.log(TAG, viewWidth)
        console.log(TAG, viewHeight)
        this.setData({
            imageHistoryRect: {
                width: viewWidth,
                height: viewHeight
            }
        })
    },

 

onToLower: function (e) {//scrollview滑動到底部的時候中止timer
    clearInterval(this.timer)
    console.log(TAG, "onToLower" + e.detail)
    // this.setData({ //也能夠從開頭從新滑動
    //     scrollLeft: 0
    // })
},
onScroll: function (e) { //只是打印scroll-view滑動事件, 用來調試
    console.log(TAG, "onScroll:scrollLeft:" + e.detail.scrollLeft)
},
onShow: function () { //在Page顯示的時候 啓動timer. 能夠直接this.timer賦值,不用聲明
    this.timer = setInterval(this.scrollHistoryView, 60)
    console.log(TAG, "setInterval")
},
onHide: function () { //在Page隱藏的時候, 關閉timer
    clearInterval(this.timer)
    console.log(TAG, "clearInterval")
},

scrollHistoryView: function () { //自動滾動scroll-view代碼
    // console.log(TAG, "scrollHistoryView:" + this.data.scrollLeft),
        this.setData({
            scrollLeft: this.data.scrollLeft + 7
        })
},

數據定義

data: {
    scrollLeft: 0,
    imageHistoryRect: {}}

 

其間遇到一個問題, scroll-view不能自動滾動到底部 將scroll-with-animation="true" 去掉就行了

這篇文章的同窗彷佛說的不對 https://blog.csdn.net/TrZoey/article/details/79914168

 

參考

小程序的settimeout和setinterval: https://blog.csdn.net/xuexixuexien/article/details/79146659

微信小程序image圖片自適應寬度比例顯示的方法: http://www.qianduan8.com/1005.html

微信小程序scroll-view沒法準確滾動到頁面最底部 https://blog.csdn.net/TrZoey/article/details/79914168