scroll-view指定滚动元素的起始位置

简介: scroll-view指定滚动元素的起始位置

scroll-into-view属性,值为某子元素的id,不能以数字开头,设置哪个方向滚动,则在哪个方向上滚动到该元素。
使用场景一:查看当前日期之前的数据(需求:初始化时为当前日期,然后从右往左滑动)
在这里插入图片描述

  <scroll-view enable-flex scroll-x class="scroll-x" scroll-into-view="{{scrollIntoView}}" style="height: 120rpx;width: 100%;">
    <view id="{{item.id ? item.id : index}}" wx:for="{{monthList}}" wx:key="index" class="view_item" style="position: relative;">
      <view wx:if="{{item.month == 1}}" style="position: absolute;top: -55rpx;left:40rpx;font-size: 24rpx;color:#a1a1a1;height: 60rpx;">{{item.year}}</view>
      <view style="background-color: {{item.background ? item.background : '#f0f8fa'}};" class="view_item_time" bindtap="clickItem" data-item="{{index}}">{{item.month}}月</view>
    </view>
  </scroll-view>

初始化数据时,给最后一个item元素设置一个id为left,然后再设置scroll-into-view属性的值为left即可
注意点:要先加载完列表数据再设置scroll-into-view属性的值
使用场景二:scroll-view结合日历组件,默认从当前日期开始向右滑动,日历选择哪个日期,scroll-view就从哪个日期开始滑动,可选日期为当前日期后一个月。
在这里插入图片描述处理数据:

  data: {
    dateList:[],
    timeList:[],
    showCalender: false,
    date: "",
    minDate:'',
    maxDate:'',
    scrollIntoView:'',
  },
 // 获取当前年月日
  getCurrentDate(index) {
    var datetime = new Date();
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
    var date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate();
    var time = year + '/' + month + '/' + date
    // 获取当前日期加上30天后的日期,限制日历只能选择后30天
    var date1 = new Date();
    var date2 = new Date(date1);
    // 设置一个月的某一天
    date2.setDate(date1.getDate() + 30);
    let dateLater = date2.getFullYear() + "/" + (date2.getMonth() + 1) + "/" + date2.getDate()
    // 日历中的最小和最大可选日期
    this.setData({minDate:new Date(time).getTime(),maxDate:new Date(dateLater).getTime()})
    // 获取当前日期加上某天后的日期
    let dateList = [],timeList = [],weekList = []
    for(let i = 0;i <= 30;i++) {
      dateList[i] = new Date(date1)
      // 列表展示需要的数据
      dateList[i].setDate(date1.getDate() + i)
      // 请求接口需要的完整日期数据
      timeList[i] = dateList[i].getFullYear() + "/" + (dateList[i].getMonth() + 1)  + "/" + dateList[i].getDate()
      // 获取星期几
      weekList[i] = dateList[i].getDay()
    }
    dateList = dateList.map(item => {
      return item.getDate()
    })
    weekList = weekList.map(item => {
      if(item === 0) {
        return '周日'
      } else if(item == 1) {
        return '周一'
      } else if(item == 2) {
        return '周二'
      } else if(item == 3) {
        return '周三'
      } else if(item == 4) {
        return'周四'
      } else if(item == 5) {
        return '周五'
      } else if(item == 6) {
        return '周六'
      }
    })
    dateList = dateList.map(item => {
      return {date:item}
    })
    if(index) {
         // 选择了日历中的日期,设置对应滑动列表中的id
      dateList[index].background = '#00bcd4'
      dateList[index].color = '#fff'
      dateList[index].id = 'target'
    } else {
         // 没有选择日历,默认设置滑动列表中第一条数据的id
      dateList[0].background = '#00bcd4'
      dateList[0].color = '#fff'
      dateList[0].id = 'target'
    }
    dateList.map((item1,index1) => {
      weekList.map((item2,index2) => {
        if(index1 === index2) {
          item1.week = item2
        }
      })
    })
    // 给scroll-view设置
    this.setData({dateList,timeList,scrollIntoView:'target'})
  },

日历

<van-calendar poppable row-height='50' min-date="{{minDate}}" max-date="{{maxDate}}" show="{{ showCalender }}" color='rgba(0, 188, 212, 1)' show-title='{{false}}' close-on-click-overlay show-confirm bind:confirm="chooseDate" bind:close='closeCalender' />

滑动列表

<scroll-view enable-flex scroll-x class="scroll-x" scroll-into-view="{{scrollIntoView}}">
  <view id="{{item.id ? item.id : index}}" style="background-color: {{item.background ? item.background : '#fff'}};color: {{item.color ? item.color : '#000'}};" class="date-item" bindtap="clickDate" wx:for="{{dateList}}" wx:key="index" data-index="{{index}}">
     <view class="item-week">{{item.week}}</view>
     <view class="item-date">{{item.date}}</view>
   </view>
</scroll-view>

选择日期

  chooseDate(e) {
    let timeStamp = new Date(Date.parse(e.detail))
    let year = timeStamp.getFullYear()
    let month = timeStamp.getMonth() + 1
    let day = timeStamp.getDate()
    let date = `${year}/${month}/${day}`
    this.setData({
      date,
      showCalender: false
    })
    this.data.timeList.map((item,index) => {
      if(item === date) { 
      // 选中日历中的日期与滑动列表中的日期相等
      // 每选一次日历日期都重新渲染一下滑动列表中的数据
        this.getCurrentDate(index)
        setTimeout(() => { this.getCurrentDate(index)},500)
      } else {              
        this.data.dateList[index].id = index
        this.data.dateList[index].background = '#fff'
        this.data.dateList[index].color = '#000'
      }
    })
    this.setData({dateList:this.data.dateList})
  },
相关文章
|
JavaScript 数据库
Vue之ElementUI之动态树+数据表格+分页(项目功能)
Vue之ElementUI之动态树+数据表格+分页(项目功能)
516 0
|
JavaScript
vue element plus DateTimePicker 日期时间选择器
vue element plus DateTimePicker 日期时间选择器
1045 0
|
小程序 API
uniapp中uview组件库丰富的Calendar 日历用法
uniapp中uview组件库丰富的Calendar 日历用法
2269 0
|
算法 安全 Ubuntu
Linux下的软件包管理器有哪些
Linux下的软件包管理器有哪些
877 5
|
算法 小程序 API
2025年最新蓝牙Beacon技术深度剖析与停车场定位导航实战指南
本文通过分析蓝牙Beacon技术工作原理、停车场定位导航硬件部署、蓝牙信号平滑处理等,旨在剖析蓝牙Beacon技术在停车场定位导航系统中的实际应用与优势,迅速定位空闲车位,提供反向寻车功能,并优化停车场管理流程,有效解决大型停车场中的找车位难题。如需获取详细解决方案可前往文章最下方获取,如有项目需求及技术合作可私信作者。
1267 0
|
图形学
unity噪声消融效果Shader实现
在 Unity 中实现噪声消融效果,利用噪声纹理和透明度裁剪技术。噪声纹理(如 Perlin 噪声)为物体表面提供随机参考值,透明度裁剪通过设置阈值控制显示与消失。具体步骤包括引入噪声纹理、设置阈值和边缘颜色,使用自定义着色器代码实现物体部分消失的视觉效果。通过调整材质球和噪声贴图,可优化最终呈现。
|
编解码 人工智能 自然语言处理
扩散模型的多元化应用:药物发现、文本生成、时间序列预测等
AlphaFold3是DeepMind的蛋白质结构预测软件,它引入扩散模型以提升预测准确性。扩散模型通过逐步添加和去除噪声来理解和生成数据,应用广泛,包括图像、音频、文本和时间序列数据的处理。在图像领域,它们擅长合成、编辑和超分辨率;在文本处理中,扩散模型在代码合成和问答任务中表现出色;在音频和视频生成方面也有重要应用;同时,它们在时间序列预测和增强模型鲁棒性方面也展现出潜力。随着技术发展,扩散模型将在更多领域发挥作用。
1041 0
|
监控 C++
深入理解 uni-app 页面生命周期(一):onLoad vs onShow
深入理解 uni-app 页面生命周期(一):onLoad vs onShow
2903 0
Vuforia专题:设置AR摄像头自动对焦
这篇文章介绍了如何在Vuforia AR应用中设置摄像头自动对焦,以提高摄像头画面清晰度和识别效果,并提供了具体的代码实现步骤。
Vuforia专题:设置AR摄像头自动对焦
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
986 4