Uniapp 页面左侧固定背景色 - 实现100px宽度 #333 背景

<p>通过在页面的<style>标签中设置一个固定宽度的伪元素来实现左侧100px区域的背景色设为#333，并保持不变。
具体步骤如下：</p>
<ol>
<li>在App.vue或需要设置的页面的.vue文件中，找到<style>标签，如果没有则新建一个。</li>
<li>在<style>标签中添加以下代码：</li>
</ol>
<pre><code class="language-css">.page {
  position: relative;
  overflow-x: hidden;
}

.page::before {
  content: &quot;&quot;;
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: #333;
  z-index: -1;
}
</code></pre>
<ol start="3">
<li>将页面的根元素（一般为<code>&lt;div class=&quot;page&quot;&gt;</code>）添加一个class名为&quot;page&quot;，如下所示：</li>
</ol>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class=&quot;page&quot;&gt;
    &lt;!-- 页面内容 --&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>这样就可以实现页面左侧100px区域的背景色为#333，并且无论如何滑动页面，左边的背景色都会保持不变。</p>