Leadfyy.co
/
uniapp-supplychain
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[修复] table左滑回不去的问题(组件scroll-left赋值问题) 

[修复] table有多个的时候只有第一个能滚动(table类名一样，导致dom查找时只能取到第一个，已加入随机唯一class标识)
[优化] 供应商申请报价搜索框样式
master
邓平艺 5 years ago
parent
c07f5c9c28
commit
dd6abda8ba
3 changed files with 53 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      canteen/components/wyb-table/wyb-table.vue
  2. 33
      supplier/components/wyb-table/wyb-table.vue
  3. 2
      supplier/pages/offer/index.vue

34
canteen/components/wyb-table/wyb-table.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="wyb-table-box">
<view class="wyb-table-box" :class="randomClass">
<view v-if="loading" class="wyb-table-loading-box" :style="{
'max-width': width === 'auto' ? screenWidth : width,
'max-height': height === 'auto' ? '300rpx' : height,
@ -206,7 +206,6 @@
<script>
import Pinyin from './js/characterToPinyin.js'
import {isEqual} from './js/objEqual.js'
let timer = null;
export default {
data() {
return {
@ -226,6 +225,8 @@
checkType: this.enableCheck,
data: []
},
timer: null,
randomClass: "x"+ Math.random().toString(32).substr(2),
chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
}
},
@ -766,24 +767,41 @@
}
this.autoScrollView();
},
destroyed(){
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
// 页面初次加载，判断是否自动滚动至input输入框所在的位置
autoScrollView(){
try{
// #ifdef H5
if(this.$props.scrollToInput){
let that = this;
if(that.$props.scrollToInput){
setTimeout(function(){
// 完整选取dom .wyb-table-scroll-view .wyb-table-content .wyb-table-content-line .wyb-table-content-item input
let tabView = document.querySelector('.wyb-table-scroll-view'); // 获取第一层大对象，table
let tabView = document.querySelector('.'+ that.randomClass +' .wyb-table-scroll-view'); // 获取第一层大对象，table
let tabContent = tabView.querySelector('.wyb-table-content'); // 获取第二层，table的content部分
let contentLine = tabContent.querySelector('.wyb-table-content-line'); // 获取第三层，获取内容列
let contentItem = contentLine.querySelector('.wyb-table-content-item input'); // 获取第四层，内容单元格
let offsetWidth = contentItem.offsetParent.offsetWidth;
let offsetLeft = contentItem.offsetParent.offsetLeft - offsetWidth - 20;
timer = setInterval(function(){
let offsetLeft = contentItem.offsetParent.offsetLeft;
let scrollLeft = offsetLeft - offsetWidth - 20;
if(that.timer){
clearInterval(that.timer);
that.timer = null;
}
if(scrollLeft <= 0){
return; // 判断含有input的元素是否在前面，是就不做滚动
}
that.timer = setInterval(function(){
let currentScrollLeft = tabView.scrollLeft;
tabView.scrollLeft += 2;
if(tabView.scrollLeft >= offsetLeft){
clearInterval(timer);
if((tabView.scrollLeft >= scrollLeft) || currentScrollLeft == tabView.scrollLeft){
clearInterval(that.timer); // 判断相等是为了元素已经滚动到后面没法滚动了，scrollLeft赋值失败，导致计时器一直在跑
that.timer = null;
}
}, 2);
}, 1000)

33
supplier/components/wyb-table/wyb-table.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="wyb-table-box">
<view class="wyb-table-box" :class="randomClass">
<!-- loading加载框 -->
<view v-if="loading" class="wyb-table-loading-box" :style="{
'max-width': width === 'auto' ? screenWidth : width,
@ -230,6 +230,8 @@
checkType: this.enableCheck,
data: []
},
timer: null,
randomClass: "x"+ Math.random().toString(32).substr(2),
chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
}
},
@ -814,24 +816,41 @@
}
this.autoScrollView();
},
destroyed(){
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
// 页面初次加载，判断是否自动滚动至input输入框所在的位置
autoScrollView(){
try{
// #ifdef H5
if(this.$props.scrollToInput){
let that = this;
if(that.$props.scrollToInput){
setTimeout(function(){
// 完整选取dom .wyb-table-scroll-view .wyb-table-content .wyb-table-content-line .wyb-table-content-item input
let tabView = document.querySelector('.wyb-table-scroll-view'); // 获取第一层大对象，table
let tabView = document.querySelector('.'+ that.randomClass +' .wyb-table-scroll-view'); // 获取第一层大对象，table
let tabContent = tabView.querySelector('.wyb-table-content'); // 获取第二层，table的content部分
let contentLine = tabContent.querySelector('.wyb-table-content-line'); // 获取第三层，获取内容列
let contentItem = contentLine.querySelector('.wyb-table-content-item input'); // 获取第四层，内容单元格
let offsetWidth = contentItem.offsetParent.offsetWidth;
let offsetLeft = contentItem.offsetParent.offsetLeft - offsetWidth - 20;
timer = setInterval(function(){
let offsetLeft = contentItem.offsetParent.offsetLeft;
let scrollLeft = offsetLeft - offsetWidth - 20;
if(that.timer){
clearInterval(that.timer);
that.timer = null;
}
if(scrollLeft <= 0){
return; // 判断含有input的元素是否在前面，是就不做滚动
}
that.timer = setInterval(function(){
let currentScrollLeft = tabView.scrollLeft;
tabView.scrollLeft += 2;
if(tabView.scrollLeft >= offsetLeft){
clearInterval(timer);
if((tabView.scrollLeft >= scrollLeft) || currentScrollLeft == tabView.scrollLeft){
clearInterval(that.timer); // 判断相等是为了元素已经滚动到后面没法滚动了，scrollLeft赋值失败，导致计时器一直在跑
that.timer = null;
}
}, 2);
}, 1000)

2
supplier/pages/offer/index.vue
View File

@ -476,7 +476,7 @@
color: #777;
}
.search-self {
background: rgb(228,228,228);
background: #f2f2f2;
padding: 10rpx 0 10rpx 20rpx;
border-radius: 40rpx;
font-size: 28rpx;

Write Preview
Loading…
Cancel
Save