微信小程序将页面按钮悬浮固定在底部

效果图如下所示：

ps: 悬浮固定在页面的底部，并且背景有白色层将页面底部文字的显示遮罩，一面影响显示观感。且不受页面下拉上提的影响。

wxml代码如下：

  <!--底部按钮的背景层--><view class="baise"></view><!--底部按钮--><view class="anniu"><button formType="submit" class="btn-normal btbdstk" bindtap="resetSalaryBtnClick" ><view class="bdstk" ><text >重置条件</text> </view></button><button formType="submit" disabled="{{disabled}}" class="btn-normal btbdstk" ><view class="sqdzk"><text>确认查询</text></view></button></view>

wxss样式如下：

/* 底部按钮 */
.baise{background:#FFFFFF;display:flex;position:fixed; width:100%;height:150rpx;z-index:665;bottom:0rpx;
}
.anniu{display:flex;position:fixed; width:95%;z-index:666;bottom:55rpx;
}
.btbdstk{margin-left:30rpx;width:50%;
}
.bdstk{font-size:30rpx;color:#ffffff;width:100%;border:2rpx solid #ffffff;border-radius:15rpx;background:#78B8FD;height: 95rpx;text-align: center;line-height:95rpx;
}
.sqdzk{font-size:30rpx;color:#ffffff;width:100%;border:2rpx solid #ffffff;border-radius:15rpx;background:#FF7178;height: 95rpx;text-align: center;line-height:95rpx;
}

微信小程序将页面按钮悬浮固定在底部相关推荐

微信小程序点击按钮分享指定页面
微信小程序点击按钮分享指定页面 1.在wxml里写所要点击的按钮 <button data-info='{{order}}' open-type="share" hover- ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
隐藏微信小程序返回首页按钮（小房子）
隐藏微信小程序返回首页按钮(小房子) 之前开发小程序时会碰到用户打开非主页时,页面会显示返回首页按钮.现在可以隐藏啦!!! 需要注意的是1.调试基础库版本需要2.8.3及以上:2.以及微信7.0.7版 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
微信小程序限制页面收藏
控制小程序允许页面收藏带来的影响微信小程序支持页面收藏.不支持隐藏收藏有些页面不允许直接进入,(控制–页面被收藏后能直接被访问–带来的影响) 方法一配置黑名单当重新打开小程序页面路径在黑名单里 ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...

微信小程序将页面按钮悬浮固定在底部

微信小程序将页面按钮悬浮固定在底部相关推荐

最新文章

热门文章