位置: IT常识 - 正文

【微信小程序】按钮还能这样用?(微信小程序开发一个多少钱)

编辑:rootadmin
【微信小程序】按钮还能这样用?

目录

🍓button 按钮的基本使用

🍉各种神奇的按钮


🍓button 按钮的基本使用按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

推荐整理分享【微信小程序】按钮还能这样用?(微信小程序开发一个多少钱),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序开发公司,微信小程序开发公司,微信小程序怎么制作自己的小程序,微信小程序开发,微信小程序制作,微信小程序制作,微信小程序开发公司,微信小程序开发一个多少钱,内容如对您有帮助,希望把文章链接给更多的朋友!

通过type属性指定按钮颜色类型

WXML:

<!-- 通过type属性指定按钮颜色类型 --><button>普通按钮</button><button type="primary">主色调</button><button type=warn">警告</button>

注:后期会对按钮添加事件,现在只是给大家演示一下按钮的类型

小尺寸按钮

<button size="mini">普通按钮</button><button type="primary" size="mini">主色调</button><button type=warn" size="mini">警告</button>plain镂空按钮 <button plain>普通按钮</button><button type="primary" plain>主色调</button><button type=warn" plain>警告</button>🍉各种神奇的按钮

去这里找按钮的样式,然后复制:

【微信小程序】按钮还能这样用?(微信小程序开发一个多少钱)

Buttons - copy CSS & HTML! (uiverse.io)

 WXML:(大家到时候需要改一改,因为我直接复制上面 按钮样式 里面的代码)

<button>   <span>Button</span>   <view class="liquid"></view> </button>

WXSS:

/* From www.lingdaima.com */button { position: relative; padding: 19px 36px; display: block; text-decoration: none; text-transform: uppercase; overflow: hidden; border-radius: 40px; border: none; } button span { position: relative; color: #fff; font-family: Arial; letter-spacing: 8px; z-index: 1; } button .liquid { position: absolute; top: -80px; left: 0; width: 100%; height: 200px; background: #4973ff; box-shadow: inset 0 0 50px rgba(0, 0, 0, .5); transition: .5s; } button .liquid::after, button .liquid::before { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -75%); background: #fff; } button .liquid::before { border-radius: 45%; background: rgba(20, 20, 20, 1); animation: animate 5s linear infinite; } button .liquid::after { border-radius: 40%; background: rgba(20, 20, 20, .5); animation: animate 10s linear infinite; } button:hover .liquid { top: -120px; } @keyframes animate { 0% { transform: translate(-50%, -75%) rotate(0deg); } 100% { transform: translate(-50%, -75%) rotate(360deg); } }

WXML:

<button> Button</button>

WXSS:

/* From uiverse.io by @adamgiebl */button { background: #FBCA1F; font-family: inherit; padding: 0.6em 1.3em; font-weight: 900; font-size: 18px; border: 3px solid black; border-radius: 0.4em; box-shadow: 0.1em 0.1em; } button:hover { transform: translate(-0.05em, -0.05em); box-shadow: 0.15em 0.15em; } button:active { transform: translate(0.05em, 0.05em); box-shadow: 0.05em 0.05em; }

下期预告:image 组件的基本使用

本文链接地址:https://www.jiuchutong.com/zhishi/295322.html 转载请保留说明!

上一篇:【CSS】面试官问我视差滚动怎么实现?我懵了...(css经典面试题)

下一篇:JS之location对象详解

  • 个税汇算清缴可以修改收入吗
  • 个人所得税手续费返还时间
  • 电子税务局登陆密码总是错误怎么办
  • 赠送代金券的广告语
  • 所得税交多了怎么办
  • 个税年度汇算清缴截止时间
  • 会计凭证审核的主要内容
  • 固定资产报废电脑
  • 劳务费发票入账在所得税中有何规定
  • 费用已支付但发票未收可以先记费用吗
  • 收到退税如何记账
  • 小规模企业多交增值税
  • 资产负债表上预付账款和预收账款区别
  • 已付款收不到发票怎么办
  • 企业增资认缴是什么意思
  • 小企业准则汇兑损失计入什么科目
  • 技术服务企业会计思维导图
  • 应计入企业存货成本有哪些
  • 以股权投资入股放高利贷违法吗
  • 事业单位非税收入包括哪些
  • 以前年度发生的费用
  • 2016年的发票2020年可以认证吗
  • 我公司去年职工工资多少
  • 6月实施的新政有哪些?
  • 企业所得税哪些不可以税前扣除
  • 忘了结转成本怎么办
  • 委托加工物资成本计入
  • win11怎么用
  • 综合资金成本是
  • 雪茄烟在什么环节交消费税
  • 买入投资性房地产的会计处理
  • 如何压缩文件打包发送微信
  • php的in_array
  • 分批供货付款方式
  • 原始凭证必须具备的基本要素
  • php 上传
  • 餐饮费是业务招待费还是差旅费
  • mmdetection ValueError: need at least one array to concatenate解决方案
  • php获取文件夹大小
  • 交通银行手机银行网页版
  • 融资租赁租入固定资产是什么意思
  • 关于低值易耗品的说法中不正确的是
  • 残保金补申报后处罚会自动取消吗
  • 工资与劳务报酬是否合并缴纳个税
  • 帝国cms栏目分类
  • 一般纳税人销售旧货适用征收率是?
  • 将织梦dedecms转换到wordpress
  • mysql常见报错
  • 返利冲减销售收入还是进费用
  • 小规模纳税人征收率5%的情况
  • 无法收回的应收账款可以税前扣除吗
  • 发票拿到了怎样作废
  • 企业购买银行理财产品的会计处理
  • 飞机票退票费如何开票
  • 备用金没有发票,只有支付凭证
  • 销售废旧物资是否缴税 如何账务处理
  • sql server使用教程
  • win10系统问题怎么修复
  • 事件查看器中"TermService" 服务的性能库问题处理
  • centos6 systemctl
  • service.exe是什么
  • windows unistd.h
  • win7打开文件夹都是独立的窗口
  • 没有了开始菜单怎么恢复
  • win8.1安全模式怎么进入
  • win7系统无法删除打印机驱动
  • qt::windowtype
  • unity的脚本
  • Android: netd中NetlinkManager的简单介绍
  • JQuery datepicker 用法详解
  • nodejs+ts
  • javascript.
  • js短信验证码60s倒计时
  • 国考什么时候开始备考比较好
  • 申报印花税显示未维护营行业信息
  • 小微企业契税政策
  • 五险一金不满一年可以领失业金吗
  • 福建省人民医院院长
  • 房产税交错了能否退款
  • 机构改革后地方金融局怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设