当前位置:网站首页>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})
},
边栏推荐
- Difference between shortest path and minimum spanning tree
- When PHP uses env to obtain file parameters, it gets strings
- Jackson: what if there is a lack of property- Jackson: What happens if a property is missing?
- PMP notes
- conda和pip的区别
- Beandefinitionregistrypostprocessor
- phpstudy设置项目可以由局域网的其他电脑可以访问
- 23 design models
- Use abp Zero builds a third-party login module (I): Principles
- JMeter performance automation test
猜你喜欢
SVN分支管理
Zhiniu stock project -- 05
Kubesphere - set up redis cluster
輕松上手Fluentd,結合 Rainbond 插件市場,日志收集更快捷
Kubernetes notes (VI) kubernetes storage
Migrate data from Mysql to tidb from a small amount of data
JMeter performance automation test
使用conda创建自己的深度学习环境
Kubernetes notes (IX) kubernetes application encapsulation and expansion
项目总结--2(Jsoup的基本使用)
随机推荐
Jedis source code analysis (II): jediscluster module source code analysis
Merge and migrate data from small data volume, sub database and sub table Mysql to tidb
致即将毕业大学生的一封信
有意思的鼠标指针交互探究
Beandefinitionregistrypostprocessor
The win7 computer can't start. Turn the CPU fan and stop it
IE browser flash back, automatically open edge browser
【系统设计】邻近服务
23 design models
Skywalking8.7 source code analysis (I): agent startup process, agent configuration loading process, custom class loader agentclassloader, plug-in definition system, plug-in loading
[set theory] equivalence relation (concept of equivalence relation | examples of equivalence relation | equivalence relation and closure)
phpstudy设置项目可以由局域网的其他电脑可以访问
PMP笔记记录
PMP notes
Code generator - single table query crud - generator
Reinstalling the system displays "setup is applying system settings" stationary
Oauth2.0 - user defined mode authorization - SMS verification code login
Method of converting GPS coordinates to Baidu map coordinates
BeanDefinitionRegistryPostProcessor
Kubernetes notes (IV) kubernetes network