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

微信小程序的文件主要由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浮动，一个左浮动，一个右浮动。设置宽度百分比是为了让看起来距离比例更加协调。

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

微信小程序如何通过button按钮实现分享（转发）功能
微信小程序如何通过button按钮实现分享(转发)功能导读:微信小程序通过button按钮实现分享(转发)功能有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答.... 微信小程 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序实现两个数之间的运算
微信小程序实现两个数之间的运算要求:创建一个微信小程序实现两个数字的比较运算.加法运算.减法运算.乘法运算或者除法运算中的一种,效果如图(这里我写的包含了所有运算,可根据需要自行选择): app.j ...
微信小程序实用工具——渐变色按钮（一）
微信小程序实用工具--渐变色按钮(一) 文章目录微信小程序实用工具--渐变色按钮(一) 前言按钮一按钮二按钮三按钮四按钮五按钮六按钮七按钮八前言平时我们在开发中的按钮色调过于单调 ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
微信小程序自定义获取手机号按钮样式
微信小程序提供了获取手机号的方式,需要通过 open-type 为 getPhoneNumber 的按钮,然而基础的 button 组件有时候并不能满足我们的需求想要实现图中的自定义的按钮样式,有两 ...
微信小程序实现两数相加
下面为实现微信小程序两数相加的代码
微信小程序比较两个数大小
微信小程序,输入两个数比较大小效果图 wxml代码  <view class="demo-box"><text c ...

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

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

最新文章

热门文章