<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 方法中就成功了
前端小白。。。打扰大家了。。。
2 个回复
1***@qq.com
我不知道你这么写会不会出现问题 但是严格来说 页面生命周是没有 mounted 和 updated 这两个属于组件的生命周期
正常的做法可以参考官方示例 在 created 生命周期中 使用 $nextTick 配合 setTimeout 来确保在你的视图加载完成后 执行你想做的操作
小枫叶 - 外包接单加v:wlmk1234567 注明来意
scrollleft也能实现