zoukankan      html  css  js  c++  java
  • uni-app 可滚动视图区域

    <template>
        <view>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" class="scroll-y" scroll-with-animation="true">
                <view class="scroll-y" style="background-color: red;">A</view>
                <view class="scroll-y" style="background-color: green;">B</view>
                <view class="scroll-y" style="background-color: blue;">C</view>
            </scroll-view>
            <view @click="goTop">点我回到顶部</view>
            <scroll-view @scroll="scroll1" :scroll-left="scrollLeft" class="scroll-x x" scroll-x="true" >
                <view class="scroll-x" style="background-color: red;">A</view>
                <view class="scroll-x" style="background-color: green;">B</view>
                <view class="scroll-x" style="background-color: blue;">C</view>
            </scroll-view>
            <view @click="goLeft">点我回到最左侧</view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    //当前距离顶部位置
                    scrollTop:0,
                    scrollLeft:0,
                    old: {
                        //记录距离顶部位置
                        scrollTop: 0,
                        scrollLeft:0
                    }
                }
            },
            onLoad(e) {
            },
            methods: {
                upper: function(e) {
                    console.log('我到顶部了')
                },
                lower: function(e) {
                    console.log('我到底部了')
                },
                scroll: function(e) {
                        // console.log(e)
                        this.old.scrollTop = e.detail.scrollTop
                },
                goTop: function(e) {
                        //给当前距离顶部位置赋值
                        this.scrollTop = this.old.scrollTop
                        //异步更新距离顶部位置
                        this.$nextTick(function() {
                                this.scrollTop = 0
                        });
                },
                scroll1(e){
                    this.old.scrollLeft=e.detail.scrollLeft
                },
                goLeft(e){
                    this.scrollLeft = this.old.scrollLeft
                    //异步更新距离顶部位置
                    this.$nextTick(function() {
                            this.scrollLeft = 0
                    });
                }
            }
        }
    </script>
    
    <style>
        .scroll-y{
             100%;
            height: 300rpx;
            text-align: center;
            line-height: 300rpx;
        }
        .scroll-x{
             100%;
            height: 300rpx;
            text-align: center;
            line-height: 300rpx;
            display: inline-block;
        }
        .x{
            flex-wrap: nowrap;
            white-space: nowrap;
        }
    </style>







  • 相关阅读:
    c语言 数组合并
    c++ 静态函数
    c++ 多继承 公有,私有,保护
    c++ 多继承 public
    stat用法:获取文件对应权限的数字
    sublime text3 (Mac) 快捷键
    c++ 多继承
    C++ 在继承中虚函数、纯虚函数、普通函数,三者的区别
    更换主机后SSH无法登录的问题
    ssh 连接不同无线网且IP以及用户名都相同
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/12582111.html
Copyright © 2011-2022 走看看