极客观点
项目管理
HarmonyOS
上面是一个左右滑动切换一周，然后刷新一周的数据的效果，自己写了下滑动效果
我的想法是在touchend里面判断滑动的距离，如果超过屏幕宽度的1/4就让他滑过去，因为安卓上的滑动的感觉不是很好。然后在调用onLoading方法，在里面就是调用api获取数据，我是想在数据获取的时加载loading，然后把整个大的div拉回原位置，同时把三个数组里面的一周的日期更新掉，这样就能够做到，无线滑动加载上一周或者下一周了。
本来以为没事了，但是发现安卓上面滑动虽然有点不自然，每次滑动都是切换的一周，但是在ios上，滑动流畅反而有时候滑动一下切换了两周。比如，这一周是18号到24号，滑动切换上一周，在切换过去之后发送上一周的时间拿去上一周的数据，但是在ios上经常就是滑动到上上周去了，然后发送的api请求只发送的是上一周的数据。而且有时候滑动时候会出现反向滑动的情况
下面是我整个页面的代码
/**Created by tao on 2016/12/21.
*/
const min = {
data() {
return {
year: 0,
month: 0,
today_year: 0,
today_month: 0,
week_day: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
weekstart: 0,
week: [],
lastweek: [],
nextweek: [],
today: 0
}
},
methods: {
Week: function () {
//初始化当前周
let today_year, today_month, time, today, today_week_start, today_week_end, today_weekday, last_year, last_month, date = [], next_year, next_month
time = new Date()
today_year = time.getFullYear()
today_month = time.getMonth()
today_weekday = time.getDay()
today = time.getDate()
this.today = today
today_week_start = new Date(today_year, today_month, today - today_weekday).getDate()
if (today_week_start > today) {
last_year = new Date(today_year, today_month, today - today_weekday).getFullYear()
last_month = new Date(today_year, today_month, today - today_weekday).getMonth()
today_week_end = new Date(last_year, last_month, today_week_start + 6).getDate()
for (var i = 0; i < 7; i++) {
var obj = {
day: 0,
show: false
}
obj.day = new Date(last_year, last_month, today_week_start + i).getDate()
if (today === new Date(last_year, last_month, today_week_start + i).getDate()) {
obj.show = true
}
date.push(obj)
}
this.lastWeek(last_year, last_month, today_week_start)
this.year = last_year
this.month = last_month
this.weekstart = today_week_start
} else {
today_week_end = new Date(today_year, today_month, today_week_start + 6).getDate()
for (var i = 0; i < 7; i++) {
var obj = {
day: 0,
show: false
}
obj.day = new Date(today_year, today_month, today_week_start + i).getDate()
if (today === new Date(today_year, today_month, today_week_start + i).getDate()) {
obj.show = true
}
date.push(obj)
}
this.lastWeek(today_year, today_month, today_week_start)
this.year = today_year
this.month = today_month
this.weekstart = today_week_start
}
if (today_week_end < today) {
next_year = new Date(today_year, today_month + 1).getFullYear()
next_month = new Date(today_year, today_month + 1).getMonth()
this.nextWeek(next_year, next_month, today_week_end)
} else {
this.nextWeek(today_year, today_month, today_week_end)
}
this.pushWeek(date, this.week)
},
lastWeek: function (year, month, today_week_start) {
//初始化上周
let last_week_start, last_year, last_month, date = []
last_week_start = new Date(year, month, today_week_start - 7).getDate()
last_year = new Date(year, month, today_week_start - 7).getFullYear()
last_month = new Date(year, month, today_week_start - 7).getMonth()
for (var i = 0; i < 7; i++) {
var obj = {
day: 0,
show: false
}
obj.day = new Date(last_year, last_month, last_week_start + i).getDate()
date.push(obj)
}
this.lastweek = []
this.pushWeek(date, this.lastweek)
},
nextWeek: function (year, month, today_week_end) {
//初始化下周
let next_year, next_month
let date = []
let next_week_start = new Date(year, month, today_week_end + 1).getDate()
next_year = new Date(year, month, today_week_end + 1).getFullYear()
next_month = new Date(year, month, today_week_end + 1).getMonth()
for (var i = 0; i < 7; i++) {
var obj = {
day: 0,
show: false
}
obj.day = new Date(next_year, next_month, next_week_start + i).getDate()
date.push(obj)
}
this.nextweek = []
this.pushWeek(date, this.nextweek)
},
pushWeek: function (date, week) {
let today = new Date().getDate()
let year = new Date().getFullYear()
let month = new Date().getMonth()
for (var i = 0; i < date.length; i++) {
var obj = {
day: 0,
weekday: '',
show: false,
reddot: 0
}
obj.day = date[i].day
obj.weekday = this.week_day[i]
obj.show = date[i].show
week.push(obj)
}
},
changeWeek: function (num) {
//当前周改变
let today_week_start,today_year,today_month
let date = []
today_week_start = new Date(this.year, this.month, this.weekstart + num).getDate()
today_year = new Date(this.year, this.month, this.weekstart + num).getFullYear()
today_month = new Date(this.year, this.month, this.weekstart + num).getMonth()
for (var i = 0;i < 7;i++){
var obj = {
day: 0,
show: false
}
if (this.today === new Date(today_year, today_month, today_week_start + i).getDate()) {
obj.show = true
}
obj.day = new Date(today_year, today_month, today_week_start + i).getDate()
date.push(obj)
}
this.week = []
this.pushWeek(date, this.week)
//上一周
this.lastWeek(today_year, today_month, today_week_start)
//下周
let next_year,next_month,today_week_end
today_week_end = new Date(today_year, today_month, today_week_start + 6).getDate()
next_year = new Date(today_year, today_month, today_week_start + 6).getFullYear()
next_month = new Date(today_year, today_month, today_week_start + 6).getMonth()
this.nextWeek(next_year, next_month, today_week_end)
this.year = today_year
this.month = today_month
this.weekstart = today_week_start
}, }} export { min }
DateWeek.vue
<template>
<div>
<div class="vux-slider"
@touchstart="scrollstart($event)"
@touchmove="scrollMove($event)"
@touchend="scrollEnd($event)">
<div class="vux-swiper" style="height: 50px">
<div class="vux-swiper-item" >
<div class="date-day"
v-for="item in lastweek">
<span class="date">{{item.day}}</span>
<span>{{item.weekday}}</span>
</div>
</div>
<div class="vux-swiper-item" >
<div class="date-day"
v-for="(item, index) in week"
:style="{border: item.show ? '1px solid #43CF76' : 'none'}"
:class="item.reddot !== 0 ? 'vux-reddot-s' : ''"
@click.stop="change(index,'#selector-'+index)">
<!--<a :href="item.a" class="link">-->
<span class="date">{{item.day}}</span>
<span>{{item.weekday}}</span>
<!--</a>-->
</div>
</div>
<div class="vux-swiper-item" >
<div class="date-day"
v-for="item in nextweek">
<span class="date">{{item.day}}</span>
<span>{{item.weekday}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
.date-week-container {
width: 100%;
height: 50px;
position: relative;
top: 0px;
white-space: nowrap;
overflow: hidden;
}
.date-week-container > div {
width: 100%;
height: 50px;
display: inline-block;
position: absolute;
top: 0px;
z-index: 10;
}
.transition {
transition: transform .5s linear;
}
.date-day {
display: inline-block;
width: 14.2%;
border-radius: 4px;
}
.date-day span {
display: block;
text-align: center;
}
.date-day span:first-child{
color: #4E4848;
font-size: 1.6rem;
}
.date-day span:last-child{
color: #B7B7B7;
font-size: 1.2rem;
}
.vux-reddot-s:after{
top: 0px;
right: 5px;
}
</style>
<script>
// import dateContent from './Content.vue'
import {min} from './index'
export default {
mixins: [min],
data() {
return {
left: 0,
startX: 0,
position: 0,
show: false
}
},
mounted: function () {
// this.position = -this.$el.clientWidth
this.Week()
this.render()
},
props: {
item: {
type: Array
}
},
methods: {
scrollstart: function (e) {
e.preventDefault()
this.startX = e.targetTouches[0].pageX
this.position = this.$el.clientWidth
},
scrollMove: function (e) {
let diff = e.targetTouches[0].pageX - this.startX
let offset = this.$el.clientWidth / 2
this.left = diff
console.log(this.left)
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
val.style.transform = transform
})
},
scrollEnd: function (e) {
if (this.left > 0) {
if (this.left > this.$el.clientWidth / 4) {
this.left = this.$el.clientWidth
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
let transition = `all .5s`
val.style.transform = transform
val.style.transition = transition
})
this.onLoading(-7)
} else {
this.left = 0
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
let transition = `all .5s`
val.style.transform = transform
val.style.transition = transition
})
}
} else if (this.left < 0) {
if (this.left < -this.$el.clientWidth / 4) {
this.left = -this.$el.clientWidth
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
let transition = `all .5s`
val.style.transform = transform
val.style.transition = transition
})
this.onLoading(7)
} else {
this.left = 0
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
let transition = `all .5s`
val.style.transform = transform
val.style.transition = transition
})
}
}
},
onLoading: function (num) {
this.changeWeek(num)
let {begin_date, end_date} = this.changeweek()
this.$emit('date', begin_date, end_date)
this.left = 0
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth + this.left
let transform = `translate3d(${distance}px, 0, 0)`
let transition = `none`
val.style.transform = transform
val.style.transition = transition
})
},
render: function () {
Array.from(this.$el.querySelectorAll('.vux-swiper-item')).forEach((val, index) => {
let distance = -this.$el.clientWidth + index*this.$el.clientWidth
let transform = `translate3d(${distance}px, 0, 0)`
val.style.transform = transform
})
let {begin_date, end_date} = this.changeweek()
this.$emit('date', begin_date, end_date)
},
change: function (count, index) {
this.week.map((item, index) => {
item.show = false
if (index === count){
item.show = true
}
})
var top = this.$parent.$el.querySelector(index)
this.$parent.$refs.scroll.$el.scrollTop = top.offsetTop - 51
},
changeweek: function () {
let time = new Date(this.year, this.month, this.weekstart)
let time2 = new Date(this.year, this.month, this.weekstart+6)
let month = Number(this.month)+1
let month2 = Number(time2.getMonth()) + 1
let begin_date = this.year + '/' + month + '/' + this.weekstart
let end_date = time2.getFullYear() + '/' + month2 + '/' + time2.getDate()
return {begin_date, end_date}
}
}
} </script>
index.vue
<template>
<div>
<date-week style="padding:1rem;background:#fff" @date="change" ref="date"></date-week>
<scroll style="top:77px;bottom: 60px;" :on-refresh="onRefresh" ref="scroll">
<div v-if="content" class="td-error-line" @click="click">
<p class="text-center">{{content}}</p>
</div>
<group :title="item.begin_date" v-for="(item, index) in items" :id="'selector-' + a[index]">
<div v-if="item.course_list.length === 0" class="td-error-line">
<p class="text-center">暂无数据~</p>
</div>
<cell v-for="list in item.course_list">
<div class="date-title" slot="icon" flex="dir:top cross:left">
<span>{{list.start_time}}</span>
<span v-if="list.course_status === 1" class="record">尚未开始</span>
<span v-if="list.course_status === 2" class="living">进行中</span>
<span v-if="list.course_status === 3" class="record">课程结束</span>
</div>
<span class="date-desc" slot="after-title">
<span>{{list.title}}</span>
<span>张老师</span>
</span>
<div slot="value"
v-if="list.course_status === 1"
class="list-button list-button-baoming">
等待开课
</div>
<div slot="value"
v-if="list.course_status === 2"
@click="go(list.roomid)"
class="list-button list-button-enter">
进入教室
</div>
<!--<div slot="value"-->
<!--v-if="list.course_status === 2"-->
<!--class="list-button list-button-baoming">-->
<!---->
<!--</div>-->
</cell>
</group>
</scroll>
<loading :show="show"></loading>
</div>
</template>
<style scoped>
.date-title{
width: 5.5rem;
height: 5.5rem;
border-right: 1px solid #D0D0D0;
}
.date-title span{
display: inline-block;
}
.date-title span:first-child{
margin-bottom: 1rem;
margin-top: .8rem;
font-size: 16px;
}
.date-title span:last-child{
font-size: 12px;
}
.date-desc{
margin-left: 1rem;
display: inline-block;
}
.date-desc span{
display: block;
}
.date-desc span:first-child{
font-size: 16px;
margin-bottom: 1rem;
margin-top: .8rem;
}
.date-desc span:last-child{
font-size: 12px;
}
.living{
color: #43CF76;
}
.record {
color: #000;
}
.list-button-baoming{
border: 0;
}
.td-error-line{
padding: 8px 0;
}
</style>
<script>
import DateWeek from './DateWeek.vue'
import scroll from '../vum-scroll/index.vue'
import group from '../group/index.vue'
import Cell from '../cell/index.vue'
import index from '../../api/index'
import Loading from '../Loading/loading.vue'
import {isEmptyObject} from '../../libs/isEmptyObject'
import { go } from '../../libs/router'
export default{
data() {
return {
begin_date:String,
end_date: String,
show: false,
text: String,
content: String,
items: [],
item: [],
a: ['0','1','2','3','4','5','6'],
week: ['周日','周一','周二','周三','周四','周五','周六']
}
},
components: {
DateWeek,
scroll,
group,
Cell,
Loading
},
methods: {
onRefresh: function(done) {
setTimeout(() => {
index.API_GET_MYCOURSE(this.begin_date, this.end_date).then((res) => {
this.items = res.data.data.course_table
this.items.map((val, index) => {
val.begin_date = val.begin_date.replace('/','年').replace('/','月')+ ' ' + this.week[index]
})
if (isEmptyObject(this.items)) this.content = '暂无内容~'
this.show = false
})
done()
},1500)
},
change: function (begin_date, end_date) {
this.begin_date = begin_date
this.end_date = end_date
this.ready()
},
go: function (id) {
go({name:'live', params:{id: id}}, this.$router)
},
click: function () {
if (this.content = '暂无内容~') return
this.ready()
},
ready: function () {
this.show = true
this.content = ''
index.API_GET_MYCOURSE(this.begin_date, this.end_date).then((res) => {
this.items = res.data.data.course_table
this.items.map((val, index) => {
val.begin_date = val.begin_date.replace('/','年').replace('/','月')+ ' ' + this.week[index]
})
if (isEmptyObject(this.items)) this.content = '暂无内容'
this.show = false
}, () => {
this.show = false
this.content = '请求失败请重试'
})
}
}
}
</script>
昨晚上弄了一晚上，发现还是自己的问题，代码没写好，出现一次滑两周是因为我不是等请求成功后再拉回原位，而是同步进行，可能这个导致了在ios上的这个问题，我把代码改成在请求后再拉回去就没问题了，而数据错误也差不多，还是我写的函数有问题。而有时候反方向滑动其实刚开始我也没找到，无意间看见在首次滑动的时候很流畅，没超过1/4自动滚动回来后，再次拖动就会很卡。看了下，是因为忘记在每次动画结束后把动画的执行时间清除掉，导致拖动的时候每次拖动都要0.5s的时间来执行，所以造成这个原因，但是我其实还是不知道为何会反向滑动了，但是把这段改好后就没出现过了，我也就没管了。
按照测试目前的反馈看，问题基本得到解决，还有些许小问题还要再看看