微信小程序如何让多个按钮横向排列

这篇具有很好参考价值的文章主要介绍了微信小程序如何让多个按钮横向排列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WXML界面添加如下代码:

<view_class>
    <button class="item auto" type="warn" size="mini"  bindtap="default"> 开 </button>
    <button class="item auto" type="warn" size="mini"  bindtap="primary"> 关 </button>
    <button class="item auto" type="warn" size="mini" bindtap="warn"> 写入 </button>
    <button class="item auto" type="warn" size="mini" bindtap="aps"> 清除 </button></view_class>

WXSS界面添加如下代码:


.view_class {
  display: flex;
  flex-direction: row;
  justify-content: center;
  resize: horizontal;
  overflow: hidden;
  margin: 1em;
}

.item {
  /* 上边 | 右边 | 下边 | 左边 */
  margin: 20px 8px auto 1px;
  padding: 0.3em;
  width: 65px;
  min-width: 0;
  background-color: #1B5385;
  color: white;
  font-family: monospace;
  font-size: 12px;
}

使用了Felx布局,要调整按键位置主要操控margin、width这几个属性

调整效果如下:

微信小程序按钮位置调整,微信小程序,notepad++,小程序

 文章来源地址https://www.toymoban.com/news/detail-754163.html

到了这里,关于微信小程序如何让多个按钮横向排列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在微信小程序中如何配置腾讯位置服务并调用

    因为很多服务都已经被封装好了,所以我们只需要调用引入配置就行了。 下面进入正题,我们要先 先注册一个账号,然后点击控制台,进去以后找到左侧的应用管理,然后点击创建应用,创建完成以后点击添加key 添加好以后点编辑   然后填写好相应的信息  然后我们要下载

    2024年02月09日
    浏览(66)
  • 微信小程序如何获取地理位置、地图显示,逆地址解析。

    微信严格了获取客户位置的要求,需要申请地理位置权限和声明。 自 2022 年 7 月 14 日后发布的小程序,若使用地理位置接口,需要在 app.json 中进行声明。 申请时需要选择适合的小程序类目、填写需要调用接口的理由和小程序图片或视频(可以弄点儿UI设计的图稿放进去,显示

    2024年02月07日
    浏览(51)
  • 微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序

    微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序 view代码 js代码

    2024年02月12日
    浏览(41)
  • 微信小程序中的H5页面如何调用地理位置导航

    在微信小程序的H5页面中,我们经常需要使用地理位置导航功能,以便为用户提供准确的导航服务。下面将介绍如何在微信小程序的H5页面中调用地理位置导航功能,并提供相应的源代码示例。 获取用户地理位置 在调用地理位置导航之前,首先需要获取用户的地理位置信息。

    2024年02月04日
    浏览(48)
  • 微信小程序如何实现页面传参和页面传递多个参数

    只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 下面时多个参数页面传参的方式   通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 分隔;如 ‘path?key=valuekey2=value2’。 案例:

    2024年02月11日
    浏览(75)
  • 微信小程序文本横向无缝滚动

    背景: 微信小程序中列表宽度不够长,其中某字段显示不完整,因此要使其自动滚动。 (最初看网上很多用定时器实现,但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表,如果设置定时器性能耗费太大,因此只用css实现) 样

    2024年02月06日
    浏览(73)
  • 微信小程序如何使用地球半径计算两组经纬度点之间的距离(自身位置与接口返回位置)【上】

    目录 1.配置位置权限  2.获取当前自身经纬度  3. 请求接口拿到返回经纬 4. 循环取每一项的经纬 5.如何判断是否打开了定位权限  6.进行距离计算操作  7.运行效果 8.完整代码 首先在使用小程序时,请求的接口一定要去配置合法域名,才能够进行接下来的操作。  在app.json中添

    2024年02月06日
    浏览(53)
  • 微信小程序横向滑动菜单栏实现

    我们开发项目过程中偶尔遇到这种的一个功能,横向的滑动菜单栏的实现。用scroll-view标签来实现,scroll-x=\\\"true\\\"属性来调整滑动方向。废话不用多说直接上代码。 WXML代码段:

    2024年02月12日
    浏览(39)
  • 微信小程序横向滚动卡片列表模板

    在开发微信小程序时,横向可滚动卡片列表是一个必不可缺的页面组件。其不仅美观还可以节省屏幕空间。具体截图如下: 主要用的是scroll-x,具体代码如下: wxml 附:renshu.png wxss js 在微信小程序开发中,横向滚动卡片列表是提升用户体验和界面美观的重要组件。本文介绍了

    2024年02月16日
    浏览(43)
  • 微信小程序卡片横向滚动竖图

     进入下面小程序可以体验效果 :   滚动并不是使用swiper,该方式使用的是scroll-view实现 Swiper局限性太多了,对竖图并不合适 从左往右滚动图片示例 wxml代码:  js代码:  wxss代码:

    2024年02月12日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包