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

最新推荐文章于 2023-09-11 10:06:14 发布

原创

最新推荐文章于 2023-09-11 10:06:14 发布 · 8.1k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

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

微信小程序的文件主要由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，这个主要和层叠有关系，