vue移动端横向滚动计算滚动距离，从而移动背景图滚动条 vant库

title随便title

</div>

<div

class="title-search title-bg"

@click="selectSearch"

></div>

</div>

<van-row>

<van-col

span="8"

class="wait-col"

</van-col>

<van-col

class="wait-col"

span="8"

</van-col>

<van-col

class="wait-col"

span="8"

</van-col>

</van-row>

</div>

　　<-- 背景图设置偏移使用动态style -->

<div

class="slide-line"

:style="{'background-position': `${bgOffset} 0`}"

></div>

<div

class="box-slide"

ref="boxSlide"

<div

class="slide-cont flex"

ref="slideCont"

@scroll="menu"

<div

@click="selectSlide(item)"

class="cont-item"

:class="{'bottom-item': (index + 1) % 2 == 0 }"

v-for="(item, index) in slideList"

:key="item.id"

<img

:src="item.imgUrl"

alt

</div>

<div

class="bg-stand"

v-if="item.slideName === '考勤打卡'"

<img

:src="standBg"

alt

</div>

<div class="item-txt">{{item.slideName}}</div>

</div>

<van-notice-bar

class="page-notice"

background="#fff"

color="#0089ff"

mode="closeable"

开启消息通知，不错过重要新消息

</van-notice-bar>

</div>

</template>

export default {

name: "HomePage",

components: {},

data () {

return {

sortMenu: 0,

slideContLeft: 0,

slideContWidth: 0,

boxSlideWidth: 0,

bgOffset: 0,

isLogin: false,

isOutline: false,

show: false,

checked: true,

standBg: require('imgurl'),

slideList: [

{

id: 1,
imgUrl: require('imgurl'),

slideName: '基础数据'

}, {

id: 5,
imgUrl: require('imgurl'),

slideName: '应急工单'

}, {

id: 2,
imgUrl: require('imgurl'),

slideName: '考勤打卡'

}, {

id: 6,
imgUrl: require('imgurl'),

slideName: '疫情管理'

}, {

id: 3,
imgUrl: require('imgurl'),

slideName: '事件工单'

}, {

id: 7,
imgUrl: require('imgurl'),

slideName: '光纤点'

}, {

id: 4,
imgUrl: require('imgurl'),

slideName: '督办工单'

}, {

id: 8,
imgUrl: require('imgurl'),

slideName: '系统管理'

}, {

id: 9,

imgUrl: require('imgurl'),

slideName: '基础数据'

}, {

id: 10,

imgUrl: require('imgurl'),

slideName: '考勤打卡'

};

methods: {

scanningCode(type) {

console.log(type)

selectSlide (item) {

console.log(item)

var id = item.id;

if (id == 2){//考勤打卡功能
　　console.log('-=-=-')

}

checkBacklog (item) {
　　console.log('-=-=-')

selectMore () {

console.log('more, opendialog')

this.show = true

selectSearch () {

　　console.log('-=-=-')

　　// 时间格式的校验

formatDateS (param) {

if (!param) {

return "";

}

let time = new Date(param);

let y = time.getFullYear();

let m = time.getMonth() + 1;

let d = time.getDate();

let h = time.getHours();

let mm = time.getMinutes();

let s = time.getSeconds();

return `${y}-${m}-${d} ${h}:${mm}:${s}`;

offset () {

　　// 获取左右移动的距离

this.scroll = document.documentElement.scrollTop || document.body.scrollTop;

let docElem = document.documentElement;

var body = document.body,

scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

menu () {

　　// 通过移动宽度和总宽度的长度比例进行计算背景图应该移动的距离

this.sortMenu = this.$refs.boxSlide.scrollLeft;

let allWidth = this.slideContWidth - this.boxSlideWidth + this.slideContLeft

this.bgOffset = ((this.sortMenu / allWidth) * 100) + '%'

}

mounted: function () {

// 计算当前屏幕宽度以及容器的宽度

window.addEventListener("scroll", this.menu, true);

let boxSlide = document.querySelector('.box-slide')

let slideCont = document.querySelector('.slide-cont')

this.slideContLeft = slideCont.getBoundingClientRect().left

this.slideContWidth = slideCont.offsetWidth

this.boxSlideWidth = boxSlide.offsetWidth

};

</script>

// 引入的css样式

@import "../../assets/style/homePage.scss";

</style>

vue移动端横向滚动计算滚动距离，从而移动背景图滚动条 vant库

猜你喜欢