l***@gmail.com
l***@gmail.com
  • 发布:2022-05-14 19:02
  • 更新:2022-05-15 21:51
  • 阅读:264

scroll-view 横向滚动如何滚动到特定位置

分类:uni-app
<template>  
    <view class="content">  
        <view class="date_wrapper">  
            <scroll-view scroll-x="true" class="scroll_view" :scroll-left="date_scroll_position">  
                <view class="date_item" v-for="(item,index) in days">  
                    <DataItem :msg="item" :selectIndex="selectItem" :showIndex="index">  

                    </DataItem>  
                </view>  
            </scroll-view>  
        </view>  
        <button @click="test">我就测试一下子</button>  
    </view>  
</template>  

<script>  
    import moment from '@/js/moment.js';  
    import axios from 'axios'  
    import DataItem from './DateItem.vue'  
    import Vue from 'vue'  

    export default {  
        data() {  
            return {  
                date_scroll_position: 0,  
                old_date_scroll_position: 0,  
                days: [],  
                items: [],  
                selectItem: 0,  
                currentYear: 0,  
                currentMonth: 0,  
                currentDay: 0,  
                data: new Map(),  
                show: true,  
                alarmShow: false,  
                actions: [{  
                        name: '不提醒',  
                        value: -1  
                    },  
                    {  
                        name: '计划开始时提醒',  
                        value: 0  
                    },  
                    {  
                        name: '开始前 5 分钟',  
                        value: 5  
                    },  
                    {  
                        name: '开始前 10 分钟',  
                        value: 10  
                    },  
                    {  
                        name: '开始前 15 分钟',  
                        value: 15  
                    },  
                    {  
                        name: '开始前 30 分钟',  
                        value: 30  
                    },  
                    {  
                        name: '开始前 1 小时',  
                        value: 60  
                    }  
                ]  
            }  
        },  
        onLoad() {},  
        mounted() {  
            const year = moment().get('year')  
            const month = moment().get('month') + 1  
            this.currentDay = moment().get('date')  
            this.selectItem = moment().get('date')  
            for (let i = 1; i <= moment().daysInMonth(); i++) {  
                const obj = {  
                    year: year,  
                    month: month,  
                    day: i,  
                    week: moment(month + '-' + i + '-' + year, 'MM-DD-YYYY').format('ddd')  
                }  
                this.days.push(obj)  
            }  

            // console.log("1 = " + this.date_scroll_position);  
            // this.date_scroll_position = this.currentDay * 80 + Math.random();  
            // console.log("2 = " + this.date_scroll_position);  
            // this.test()  

            // axios.get('../static/data.json').then((res) => {  
            //  if (res.data.result) {  
            //      this.items = []  
            //      this.data = res.data.resultObject  
            //      this.data[this.currentDay].forEach((element) => {  
            //          element.forEach((ele) => {  
            //              this.items.push(ele)  
            //          })  
            //      })  
            //      this.dateItemScrollTo()  
            //  } else {  
            //      console.log(2)  
            //  }  
            // })  
        },  
        methods: {  
            test() {  
                console.log(this.date_scroll_position);  
                this.date_scroll_position = this.currentDay * 80  
                console.log(this.date_scroll_position);  
            },  
        },  
        components: {  
            DataItem  
        }  
    }  
</script>  

<style>  
    .scroll_view {  
        white-space: nowrap;  
    }  

    .date_item {  
        display: inline-block;  
        height: 90px;  
        margin-left: 5px;  
        marker-mid: 5px;  
    }  

    .date_wrapper {  
        margin-top: var(--status-bar-height);  
    }  
</style>  

整个scroll-view显示当月的每一天,然后滚动到当天所在的item

我在mounted方法中遍历出scroll-view的数据,然后获取今天是本月第几天,然后修改 date_scroll_position 的值(第几天*每个item的宽度),滚动条却没有效果。

我试了网上说的,为date_scroll_position 加一个随机数,无效

我又给页面添加了一个按钮,点击按钮调用test方法,在test方法中修改 date_scroll_position ,有效。

我反过来在 mounted 方法计算完成后,调用test方法,却无效

懵逼了,问题出在哪里呢?求大家帮忙

==================================================
已解决

将修改 date_scroll_position 的操作放在 updated 方法中就成功了

前端小白。。。打扰大家了。。。

2022-05-14 19:02 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

我不知道你这么写会不会出现问题 但是严格来说 页面生命周是没有 mounted 和 updated 这两个属于组件的生命周期
正常的做法可以参考官方示例 在 created 生命周期中 使用 $nextTick 配合 setTimeout 来确保在你的视图加载完成后 执行你想做的操作

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

scrollleft也能实现

要回复问题请先登录注册