微信小程序-实现两个按钮固定在页面底端且不随页面滑动（静态页面）

最新推荐文章于 2025-03-25 15:36:32 发布

солнце вкус

最新推荐文章于 2025-03-25 15:36:32 发布

阅读量8k

点赞数 6

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/qq_45523980/article/details/124711704

本文介绍了微信小程序中页面布局的基本元素，包括wxml和wxss文件的使用。通过示例展示了如何创建底部固定、左右浮动的按钮，并解释了样式层叠、重要性以及wxss中的一些关键属性，如position、bottom、z-index等。此外，还提及了!important在解决样式冲突时的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的文件主要由wxml，wxss，js，json四部分组成，其实和web开发很类似，就是多了一个json文件,里面写的是一些配置文件。对页面布局的处理，主要就是通过编写wxss文件。

先看一些效果，文字只是用来做测试的，内容可以修改，主要说明两个按钮这部分。

wxml文件代码：

<view  class="btns">
   <button  class="submitbtn" form-type="submit" >
       提交
   </button>
   <button class="resetbtn" form-type="reset">
       重置
   </button>
</view>

wxss文件代码：

.btns{
    position: fixed;
    bottom: 0px;
    z-index: 1;
    width: 95%;
    background: #FFFFFF;
    height: 120rpx;
}

.submitbtn{
    width:45% !important;
    float: left;
    background-color: paleturquoise;
}

.resetbtn{
    width: 45% !important;
    float: right; 
    background-color: palevioletred;
}

wxss里面用到的属性值和css非常相似。

解释一下!important，这个主要和层叠有关系，如果页面没有特别复杂可以不用加。层叠的意思就是说如果一个文件中多处都定义了某个具体的属性值，如何取舍的规则。主要看三方面，重要性，特殊性，源次序。加了!important，表示重要程度最高，当有其他地方也定义了这个属性值时，渲染时要根据!important。

btns类选择器

position属性值设定按钮不移动位置

bottom属性值将包含块限定在最底端

z-index属性值谁大谁浮在最上面，即文字和按钮显示时，按钮在问卷内容上方

其他几个值就是颜色宽高的设置

其他两个选择器，float浮动，一个左浮动，一个右浮动。设置宽度百分比是为了让看起来距离比例更加协调。