button的扁圆形

此文章原创地址:http://blog.youkuaiyun.com/ltf857/article/details/52288813

创建drawable文件:

?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="20dp" />
    <solid android:color="#ffffff" />
    <size
        android:width="100dp"
        android:height="20dp" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>
solid:更改内部颜色
stroke:更改边框宽度,更改边框颜色
使用android:background调用
<Button
        android:id="@+id/yuan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_style"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:text="变圆" /

### 微信小程序中点击圆形按钮的样式与交互 #### 实现圆形按钮的基础布局 为了在微信小程序中创建一个圆形按钮,通常会使用`<view>`标签并配合CSS样式来设置圆角和尺寸。具体来说: ```css .button-circle { width: 80px; height: 80px; border-radius: 50%; background-color: #1aad19; display: flex; align-items: center; justify-content: center; } ``` 此段代码定义了一个具有固定宽度和高度的正方形区域,并将其四个角落都设为半径等于宽高一半的弧度,从而形成完美的圆形[^1]。 #### 添加点击事件处理逻辑 对于任何类型的按钮,在用户触发点击操作时都需要有相应的响应机制。这可以通过绑定tap事件到目标元素上来完成。下面是一个简单的例子展示如何向上述定义好的圆形按钮添加点击功能: ```html <view class="button-circle" bindtap="onCircleButtonClick"> Click Me </view> ``` 当用户触碰这个视图内的任意位置时就会调用名为`onCircleButtonClick`的方法。 #### JavaScript中的事件处理器函数 接下来是在对应的Page对象里编写实际执行的任务。这里假设希望每次按下按钮之后改变其背景颜色作为反馈: ```javascript Page({ onCircleButtonClick() { this.setData({ 'buttonStyle.backgroundColor': '#3cc51f' }); } }) ``` 这段脚本展示了怎样修改WXML文件里的数据属性以达到视觉上的变化效果。注意这里的`setData()`方法用于安全地更新界面状态而不会引起不必要的重绘开销。 #### 动画增强用户体验 为了让应用更加生动有趣,还可以考虑加入一些过渡动画。比如让按钮被按下的瞬间缩小再恢复原状,这样能提供更好的互动体验感。可以借助于`animation` API轻松实现这一点: ```javascript const animation = wx.createAnimation({ duration: 200, timingFunction: 'ease', }) // Inside the event handler... this.animation = animation.export() this.setData({ animation: this.animation }) // Then apply it to your button style. <button class="animated-button" animation="{{animation}}"> Animate Me! </button> // In CSS, define keyframes or use predefined classes from libraries like animate.css. .animated-button { /* ... */ } @keyframes scaleDownUp { 0% { transform: scale(1); } 50% { transform: scale(.9); } 100% { transform: scale(1); } } ``` 以上就是关于如何在微信小程序内设计可点击的圆形按钮及其基本交互行为的一个概述。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值