小程序的button怎样给_软件运维

Button 按钮

首先提醒一下大家游伍姿，如果你现在button标签不能用，不用担心，那是因为微信小程序存在神绝一个bug，你仔细看一下你的button标签的代码是不是这样的

<button>Content<button/>//而正确的代码是这样的<button>Content</button>123

1.在index.wxml中设置button按钮

上代码

<view class="page"><button size="default">Content</button><button size="mini">Content</button><button type="default">Content</button><橘拍button type="primary">Content</button><button type="warn">Content</button><button type="primary" plain="true">Content</button><button type="primary" disabled="true">Content</button><button type="primary" loading="true">Content</button><button type="primary" fromTyoe="reset">Content</button><button type="primary"hover-class="none">Content</button></view>1234567891011121314

解释

<view class ="container">//设置button的大小 <button size="mini|default">按钮</button>//设置button类型<button type="warn|default|primary">按钮</button>//是否透明<button plain="true">按钮</button>//是否禁用<button disable="true">按钮</button>//是否设置为加载按钮<button loa ding="true">按钮</button>//点击button的响应效果<button hover-class="none">按钮</button>//给button绑定一个点击时间,thing 在js文件中设置<button bindtap="thing">按钮</button></view>1234567891011121314151617

2.icon图标的设置

上图

**上代码**style标签下的属性是为了让图像呈横向显示

wx：for语句类似于java，c++中的for循环语句，这里只是简化了步骤，你把数组在wx：for标签中实例化，然后{{item}}直接把就会从第一个显示到最后一个，省去了很多步骤，但我不知道这个，如果好几个数组嵌套循环的话，不知道怎么写？

</block>

</view>

</block>

</view>

</block>

</view>

</view>1234567891011121314151617181920212223

index.js —– js文件一般有两种书写方式，一种就是这样，先实例化一个变量param，在里边写属性，然后再Page里边注册；另一种就是直接在Page里边设置属性。

var param={

data:{

iconSize:[20,30,40,50,60,70],

iconColor:[ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],

iconType: ['success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn','success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download','info_circle', 'cancel', 'search', 'clear'

]

}

Page(param)

<blockquote>目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉枣孝漏微信的自带导航栏，微信提供了这方面的api，接下来我们就实 *** 。</blockquote><div class="image-package"><img src="凳烂 https://upload-images.jianshu.io/upload_images/8877503-c85b39b2671d31b7.jpeg " img-data="{"format":"jpeg","size":14897,"height":141,"width":963}" class="uploaded-img" style="min-height:200pxmin-width:200px" width="auto" height="auto"/>

</div>这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以全局配置//app.json

"window": {

"navigationStyle": "custom"

}

单页面配置//page.json

{

"navigationStyle": "custom"

}

效果对比

</div>能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域。每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，慎野我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。1.获取导航栏高度及按钮位置

微信提供了获取导航栏高度的Api和胶囊按钮位置的Api

// 系统信息

constsystemInfo = wx.getSystemInfoSync()

// 胶囊按钮位置信息

constmenuButtonInfo = wx.getMenuButtonBoundingClientRect()

在控制台打印出这两个Api返回结果<div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-7925dd39fb0ec47a.jpeg " img-data="{"format":"jpeg","size":39744,"height":497,"width":679}" class="uploaded-img" style="min-height:200pxmin-width:200px" width="auto" height="auto"/>

</div>这里面我们只说几个我们接下来用到的参数。statusBarHeight // 状态栏高度

screenWidth // 胶囊的宽度

top // 胶囊到顶部距离

height // 胶囊的高度

right // 胶囊距离右边的距离

通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）

首先在app.js中定义全局data-globalDataglobalData: {

navBarHeight: 0, // 导航栏高度

menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）

menuRight: 0,// 胶囊距右方间距（方保持左、右间距一致）

menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）

新建个方法

setNavBarInfo() {

// 获取系统信息

const systemInfo = wx.getSystemInfoSync()

// 胶囊按钮位置信息

const menuButtonInfo = wx.getMenuButtonBoundingClientRect()

// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2+ menuButtonInfo.height + systemInfo.statusBarHeight

this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight

this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right

this.globalData.menuHeight = menuButtonInfo.right

}

在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在app.js

中调用及设置data。onLaunch() {

this.setNavBarInfo()

到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。

2.页面适配首先page.js中定义变量varapp = getApp()

Page({

/*

* 页面的初始数据

/

data: {

navBarHeight: app.globalData.navBarHeight, //导航栏高度

menuBotton: app.globalData.menuBotton, //导航栏距离顶部距离

menuRight: app.globalData.menuRight, //导航栏距离右侧距离

menuHeight: app.globalData.menuHeight, //导航栏高度

}

})

页面使用

<viewclass="nav"style="height:{{navBarHeight}}px">

<viewclass="nav-main">

<view

class="capsule-box" style="style="height:{{menuHeight+menuBotton 2}}pxmin-height:{{menuHeight}}pxline-height:{{menuHeight}}pxbottom:0pxpadding:0{{menuRight}}px">

</view>

wxss

/ 公共导航 */

.nav{

position: fixed

top: 0

left: 0

box-sizing: border-box

width: 100vw

z-index: 1000

}

.nav-main{

width: 100%

height: 100%

box-sizing: border-box

position: relative

}

.nav.capsule-box{

position: absolute

box-sizing: border-box

width: 100%

display: flex

align-items: center

}

最终效果<div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-ef017724a144e58c.jpeg " img-data="{"format":"jpeg","size":4933,"height":105,"width":349}" class="uploaded-img" style="min-height:200pxmin-width:200px" width="auto" height="auto"/>

</div>

此种适配方案适应所有手机，应该说是最优的选择。

小程序button事件作用到地图上的方法如下：

1、新建一个页面demo13

2、打开demo13.wxml 文件，删除里面原来的内容，写入以下代码：

保存，左侧小程序页面显示“默认按钮”

3、打开demo13.wxml 文件，代码中加入type属性，如下御仔：

<button type="镇租汪primary">primary 按钮</button><button type="warn">warn 按钮</button>

保存后，页面中出现绿色按钮（primary），红色按钮（warn）。

4、打开demo13.wxml 文件，代码中加入plain属性，如下：

<button type="warn" plain>plain 按钮</button>保存后，可看到plain按钮是无背景色的。

5、打开demo13.wxml 文件，type属性下，代码中再加入loading属性，如下型慎：

<button type="primary" loading>loading 按钮</button>。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/yw/12464952.html

小程序的button怎样给

发表评论

评论列表（0条）