scroll-view

 

scroll-view 不適合放長列表，有性能問題。長列表滾動和下拉刷新，應該使用原生導航欄搭配頁面級的滾動和下拉刷新實現。包括在app-nvue頁面，長列表應該使用list而不是scroll-view

scroll-into-view 的優先級高於 scroll-top。

scroll-view是區域滾動，不會觸發頁面滾動，沒法觸發pages.json配置的下拉刷新、頁面觸底onReachBottomDistance、titleNView的transparent透明漸變。

 

若要使用下拉刷新，建議使用頁面的滾動

 

親測，在長列表下scrow-view有性能問題，後改成view 採用頁面的滾動。

<template>
    <view class="growth-value-cell">
        <!-- <scroll-view scroll-y="true" style="height:calc(100vh)" class="scroll-view-cell" @scrolltolower="lower"> -->
        <view class="scroll-view-cell">
            <view class="growth-value-list" v-for="( item , index ) in recordList" :key="index">
                <GrowthValueItem :recordData="item"></GrowthValueItem>
            </view>
            <view class="no-data" v-if="recordList.length < 1">
                <image class="bg-nodata" src="../../static/image/bg_no_growth.png"></image>
                <view class="tips">暫無成長值記錄</view>
            </view>
        <!-- </scroll-view> -->
        </view>
    </view>
</template>

<script>
    import {
        getMemberActivityValueList,
        queryIntegralRecord
    } from "../../common/api/api.js";
    import GrowthValueItem from "../../components/GrowthValueItem/GrowthValueItem.vue";
    import {formatDateOfStamp} from '../../common/utils/dateUtil.js';
    import Vue from 'vue';
    const app = new Vue();
    export default {
        
        components:{
            GrowthValueItem
        },
        
        data() {
            return {
                recordList: [],
                hasMoreData: false, //是否還有更多數據
                reqParms: { //請求參數
                    // awardType: 3,
                    currentPage: 1,
                    pageSize: 10
                },
            }
        },

        onShow() {
            this.getMemberActivityValueList();
        },
        
        // 下拉刷新  scrow-view 不支持下拉刷新  
        onPullDownRefresh() {
            this.recordList="";
            this.reqParms.currentPage=1
            this.getMemberActivityValueList();
        },

        // 上拉加載
        onReachBottom() {
            this.lower();
        },

        methods: {
            
            getMemberActivityValueList() {
                const params = this.reqParms; //參數設定        
                queryIntegralRecord(params).then(resp => {
                        const {
                            code,
                            data
                        } = resp;
                        if (code === "200") {
                            let datalen = 0;        
                            let list = data.dataList;    
                            let _recordList = this.recordList;
                                
                            if(list){
                                datalen = list.length;        
                            }
                            
                            for(let i = 0;i < datalen; i++){
                                list[i].createTime = formatDateOfStamp(list[i].createTime, 'yyyy/MM/dd hh:mm:ss');
                                _recordList.push(list[i]);
                            }
                            
                            this.recordList = _recordList;
                            this.hasMoreData = datalen >= this.reqParms.pageSize; //true還有數據，false沒數據了
                        }
                });
            },
            
            //滾動到底部
            lower(){
                if (this.hasMoreData) {
                    let count = this.reqParms.currentPage;
                    count++;
                    //還有數據須要加載
                    this.reqParms.currentPage = count;
                    this.getMemberActivityValueList();
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../common/style/reset';

    .growth-value-cell {
        border-top: 1*2upx solid $borderColor;

        .scroll-view-cell {

            .growth-value-list {
                position: relative;
                padding: 0 15*2upx;
                background: $colorfff;

                &:after {
                    content: '';
                    display: block;
                    border-bottom: 1*2upx solid $borderColor;
                    position: absolute;
                    bottom: 0;
                    right: 15*2upx;
                    left: 15*2upx;
                }

                &:last-child {
                    &:after {
                        border: 0;
                    }
                }
            }

            .no-data {
                text-align: center;
                margin-top: 150*2upx;

                .bg-nodata {
                    width: 140*2upx;
                    height: 110*2upx;
                }

                .tips {
                    color: $color666;
                    font-size: $fontsize16;
                    margin-top: 20*2upx;
                }
            }
        }
    }
</style>

 

 scroll-view 滑動

sroll-view實現縱向滾動，和橫向滾動有些區別，

當不作任何特殊設置時，發現橫向滾動元素也是豎直排列的，

                                                   

 

     觀察屬性控制區域：發現scroll-view的display默認block。在此，作出了一些修改，完整代碼以下

 

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                Vertical Scroll
                <text>\n縱向滾動</text>
            </view>
            <view>
                <!-- 滾動到頂部或者、左邊，會觸發scrolltoupper事件，滾動到底部、右邊，會觸發scrolltolower事件 -->
                <!-- 滾動時觸發 scroll -->
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
                @scroll="scroll">
                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
                </scroll-view>
            </view>
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">
                點擊這裏返回頂部
            </view>
            <view class="uni-title uni-common-mt">
                Horizontal Scroll
                <text>\n橫向滾動</text>
            </view>
            <view>
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
                  
                    <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
                
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        upper: function(e) {
            console.log("upper",e);
        },
        lower: function(e) {
             console.log("lower",e)
        },
        scroll: function(e) {
            console.log("scroll",e)
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            console.log("goTop",e)
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
            uni.showToast({
                icon:"none",
                title:"縱向滾動 scrollTop 值已被修改成 0"
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .scroll-Y{
        height:120px;
        border:1px solid #666666;
        
        .scroll-view-item{
            width:100%;
        }
    }
    
    .uni-link{
        margin:20 * 2rpx  0 * 2rpx 50 * 2rpx;
    }
    
    .scroll-view_H{
        height:80px;
        width:200px;
        border:1px solid #666666;
        white-space: nowrap;
        
        .scroll-view-item_H{
            width:90px;    
            display: inline-block;
        }
    }
    
    .uni-bg-red{
        background:red;
        height:80px;
    }
    .uni-bg-green{
        background:green;
        height:80px;
    }
    .uni-bg-blue{
        background:blue;
        height:80px;
    }
</style>

 

效果：

              

 

             更多細節，能夠訪問小程序框架uni-app  https://uniapp.dcloud.io/component/scroll-view