scroll-view

scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。

scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。

 

亲测，在长列表下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';
    export default {
        
        components:{
            GrowthValueItem
        },
        
        data() {
            return {
                recordList: [],
                hasMoreData: false, //是否还有更多数据
                reqParms: { //请求参数
                    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>

 

效果：