当前位置:网站首页>scroll-view指定滚动元素的起始位置
scroll-view指定滚动元素的起始位置
2022-07-03 06:16:00 【落雪小轩韩】
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})
},
边栏推荐
- Selenium - 改变窗口大小,不同机型呈现的宽高长度会不一样
- Svn branch management
- 项目总结--2(Jsoup的基本使用)
- Fluentd is easy to use. Combined with the rainbow plug-in market, log collection is faster
- ODL framework project construction trial -demo
- Shell conditional statement
- POI dealing with Excel learning
- 代码管理工具
- 有意思的鼠標指針交互探究
- MySQL帶二進制的庫錶導出導入
猜你喜欢

Interesting research on mouse pointer interaction

Project summary --04

Simple understanding of ThreadLocal

Selenium - 改变窗口大小,不同机型呈现的宽高长度会不一样

Kubesphere - Multi tenant management
![[system design] proximity service](/img/4a/2e68536cbe385af1d1a591e674fbf0.png)
[system design] proximity service

Kubesphere - build Nacos cluster

Oauth2.0 - using JWT to replace token and JWT content enhancement

Oauth2.0 - explanation of simplified mode, password mode and client mode

从小数据量分库分表 MySQL 合并迁移数据到 TiDB
随机推荐
Characteristics and isolation level of database
项目总结--2(Jsoup的基本使用)
Kubesphere - build Nacos cluster
Simple handwritten ORM framework
Various usages of MySQL backup database to create table select and how many days are left
项目总结--04
Cesium entity(entities) 实体删除方法
Cesium Click to obtain the longitude and latitude elevation coordinates (3D coordinates) of the model surface
Mysql database
Oauth2.0 - user defined mode authorization - SMS verification code login
Jackson: what if there is a lack of property- Jackson: What happens if a property is missing?
表达式的动态解析和计算,Flee用起来真香
Detailed explanation of findloadedclass
POI dealing with Excel learning
Kubernetes notes (VI) kubernetes storage
Support vector machine for machine learning
Zhiniu stock project -- 05
Multithreading and high concurrency (7) -- from reentrantlock to AQS source code (20000 words, one understanding AQS)
剖析虚幻渲染体系(16)- 图形驱动的秘密
Difference between shortest path and minimum spanning tree