微信小程序按钮固定在底部

 时间:2026-05-03 03:04:01

1、打开开发者工具,在项目的pages文件夹下新建mypage文件夹,并在文件夹内新建mypage页面,在app.json中将mypage设为第一页面

微信小程序按钮固定在底部

2、在mypage.wxml中写代码如下:

<scroll-view scroll-x scroll-y >

 <image src='Desert.jpg'

 style='width:1024px;height:768px'></image>

</scroll-view>

<button>ddd</button>

微信小程序按钮固定在底部

3、保存代码,左侧模拟器查看效果如下图,button按钮看不到,这是因为图片过大,挡住了按钮

微信小程序按钮固定在底部

4、如果想让button显示出来,可以更改代码如下:

<scroll-view scroll-x scroll-y >

 <image src='Desert.jpg'

 style='width:1024px;height:768px'></image>

</scroll-view>

<button style='position:fixed;bottom:0'>ddd</button>

微信小程序按钮固定在底部

5、保存代码在左侧模拟器查看效果button就出来了

微信小程序按钮固定在底部

6、这里建议设置button宽度100%,会相对好看写,代码如下:

<scroll-view scroll-x scroll-y >

 <image src='Desert.jpg'

 style='width:1024px;height:768px'></image>

</scroll-view>

<button style='position:fixed;width:100%;bottom:0'>ddd</button>

微信小程序按钮固定在底部

7、保存代码,效果如下图,这里注意即使有tabBar也没有关系,按钮也是固定在底部,在tabBar之上

微信小程序按钮固定在底部

  • Intellij IDEA的代码提示功能怎么打开
  • 微信小程序居中怎么设置
  • MySQL怎样删除数据
  • idea2019如何给json字符串自动双引号斜杆转义?
  • 小程序如何给数组添加数据
  • 热门搜索
    血气不足怎么调理 打六折怎么算 怎么锻炼记忆力 魔力鲜颜面膜怎么样 股票日线怎么看 怎么在淘宝上开网店 抽筋是怎么回事 陈百强怎么走的 肝功能不正常怎么办 鼻子上长痘痘怎么办