记微信小程序使用view写一个圆形的预览按钮

最新推荐文章于 2022-09-27 01:35:43 发布
最新推荐文章于 2022-09-27 01:35:43 发布
阅读量1w 收藏 16
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40907536/article/details/90611381
版权 
                   记微信小程序使用view写一个圆形的预览按钮
     今天开始写微信小程序前台页面  在最后需要写一个深蓝色的预览按钮

在这里插入图片描述这个样子的 使用view标签在这里插入图片描述前台标签是这样子写的 然后开始写后台css样式

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190527203756559.png
首先把view标签设置成高和宽是3rem的正方形，然后通过border-radius使其圆润30rem成为圆形 然后设置背景色 以及使文字居中。接下来写文字的css 设置宽和高以及上边距和左边距和字体颜色 最后就完成了
在这里插入图片描述最终的结果展示！

qq_40907536
关注
专栏目录
微信小程序开发如何实现圆形按钮/圆角按钮
tl437002770的博客
01-25 1385
微信小程序开发如何实现圆形按钮/圆角按钮
微信小程序实战八：优惠券页面的实现
博主逸尘
11-12 3992
文章目录1.效果预览2.wxml布局3.js逻辑4.样式设置 1.效果预览 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbAhldKF-1636699610111)(https://gitee.com/beibei52113142/picture/raw/master/2021-11-12/1636698595055-image.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q2AE09rB-1636699610114)(htt
微信小程序 —— 自定义长圆形view
Wu_shuxuan的博客
10-11 8521
很多情况下遇到的圆形都是用“border-radius: 50%;”做的，但是遇到 这种效果的呢？换成以前的我，果断ps一张图片做背景，可这个始终不是解决办法。通过“ border-radius: 0.8em; ” 可以解决这个问题。 em: 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在
小程序用view画圆
Rechal_Mei的博客
11-01 3693
画多种圆 效果图 test.wxml <view class='wrpg-top'> <view class='clike'> <view class="element"> <view class="child"> <view class="childw"&amp
微信小程序开发之圆形菜单 仿建行圆形菜单
12-12
微信小程序开发之圆形菜单 仿建行圆形菜单
微信小程序图片圆形显示并作为按钮
热门推荐
11-15 1万+
小程序地图导航，天气显示源码  https://github.com/zzwwjjdj319/miniProgramAmap 微小信猜拳程序游戏小源码https://gitee.com/sccqcd/wechat_applet_weather_map 微信小程序机票查询源码：https：//gitee.com/sccqcd/ticket_inquiries     祖最近在做小程序的...
微信小程序-大转盘
09-10
本资源“微信小程序-大转盘”是针对初学者设计的一个实践项目，旨在帮助开发者掌握微信小程序的基本开发流程和关键组件的使用。 首先，我们要了解微信小程序的开发环境。开发者需要安装微信开发者工具，这是一个...
微信小程序开发笔记（二）第一个微信小程序
man_zuo的博客
01-26 3029
参考教材：《微信小程序开发入门与实践》 雷磊 前置知识：JavaScript，CSS 新建项目 安装好微信开发者工具后，我们就可以开始新建我们第一个微信小程序了。 选择新建项目，填入一个项目名称以及目录（即在磁盘上存放的路径），AppID这里如果没有申请，点击测试号系统会提供一个给你一个AppID，主要用于方便开发者学习和调试。 在这里，我选择的是系统提供的默认AppID，确认无误后，点击右下角...
微信小程序：小商店；增减商品数量，图片排布
最新发布
06-01
在微信小程序开发中，"小商店"是一种常见的电商应用场景，它允许用户浏览商品、选择商品数量并进行购买操作。本文将深入探讨如何实现"小商店"中的商品数量增减功能以及图片的合理排布，以提供更好的用户体验。 一、...
微信小程序 从零开发房屋租赁平台
Irimsky
05-14 9373
文章目录登录 数据库课程设计，不知道怎么的就头铁选了小程序来做前端页面（前端0经验选手），于是踩了很多坑……不过多看看别人的代码画葫芦也就能学会了，果然在实践中面向需求学习的效果还是很好的，至少现在的我已经能徒手造想要的样式的轮子了（误 写这篇博客记录一下过程中的一些想法和技巧。 登录 ...
微信小程序-圆形菜单案例
04-08
此案例为微信微信小程序开发的一个模拟菜单，具体展示样式为常用的圆形菜单。简介、方便、设计优美、雅观，值得推敲。欢迎大家下载学习！
微信小程序代码-圆形菜单功能实现.zip
04-22
微信小程序代码-圆形菜单功能实现.zip，小程序模板代码，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。
微信小程序实现圆形菜单弹出选中动画
苏苏就是小苏苏的博客
09-27 2720
微信小程序实现圆形菜单弹出选中动画
微信小程序 修改button为圆形按钮并设置图片
Mr_Tony的专栏
07-31 1万+
现在一般来说，用户没有授权时候，头像会显示一个默认图，点击时候出现授权页面。但是微信小程序授权功能现在只能用button设置，所以延伸出这个需求。实现的效果如下: 代码如下: wxml: <view class="mine_user_container"> <block class="mine-userinfo"> <view class="mine-userinfo-left"> <button class="mine-nouserinfo
微信小程序圆形图片小图标按钮
weixin_44132829的博客
11-22 6262
效果图 wxml代码 <view class="image"> <view class="txt" wx:for="{{imgs1}}" wx:key="{{index}}"> <image class="im" src="{{item.url}}" bindtap="hao" data-id="{{index}}"></image> <vi...
小程序圆角按钮
培根芝士的专栏
06-18 837
圆角线框按钮 .round-line-button{ height: 80rpx; border-radius: 40rpx; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: white; color: #666666; border: 1rpx solid #bbbbbb; } 圆角填充按钮 ...
微信小程序15---将组件设置为圆形
Yo.o
11-16 1万+
1.上图 2.index.wxss宽高和弧度的设置.circle{ width: 100px; height: 100px; border: 0 solid #ffffff; border-radius: 500px; box-shadow: 4px 1px 1px #cccccc;}
基于Canvas和Movable-view实现微信小程序圆形图片剪裁
movable-view组件是微信小程序中的一个组件，用于实现可移动的视图容器。这个组件可以用来实现图片裁剪的窗口移动和放大缩小功能。movable-view组件有很多属性，包括direction、scale、scale-min、scale-max、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值