记使用uniapp构建简单H5项目，组件使用uViewUI

前言
在一些文章详情页中，通常都会在最左侧有一个工具栏，其中包含点赞、收藏、沉浸式阅读等等按钮。那么这个怎么实现呢？可能大家会立马想到fixed定位，但是不知道大家有没有发现这个工具栏会自适应窗口变化，也就是窗口变化也会还是在原始位置。使用fixed定位写死的话就做不到自适应了，因此我们可以使用js来实现自适应。

思路
!

首先我们看上面这张图，要工具栏自适应的话我们就需要动态改变这个工具栏的left值。那怎么去改变这个值，我们就可以以文章的盒子距离最左侧的距离来判断。

创建盒子

data() {
return {
left:"0px"
}
}
先模拟创建俩个盒子，左侧工具栏和文章盒子。

获取文章盒子距离左侧的距离
const element = document.getElementById("articleBox")
var size = element.offsetLeft
首先给文章盒子添加一个id，然后通过以上代码获取距离左侧的距离

改变工具栏left
如果我们直接将上面的size赋值给left的话就会发现和盒子重叠了，所以我们需要适当的去减掉一些像素。然后修改代码就变成如下

 mounted() {
        const element = document.getElementById("articleBox")
        this.left = (element.offsetLeft - 55) + "px"     
 }

监听宽度实现自适应
我们需要监听宽度的变化来实现自适应位置。就可以使用onsize来实现
created() { window.onresize = () => { return (() => { const element = document.getElementById("articleBox") this.left = (element.offsetLeft - 55) + "px" })() } },
添加样式定位css
最后在给左侧工具栏添加fixed定位样式代码

# 教程文章