当前博客:CSS按钮如何重写

130 次浏览【转载需注明来源】

博客作者:【1348****4381】

个性签名:寒窗苦读十年,一朝凤舞九天

 

第四个是按钮,我想和前面三个的效果一样,因为调用小程序客服 需要 按钮组件;

这个代码如何写呢?

 

    <区块 类名="底部导航版块">
        <区块 类名="底部导航" 循环渲染="(data,index) 遍历 数据层.底部导航数据" :维护状态="index">
            <图片框 类名="底部导航-图片" :图像地址="data.图片地址" 缩放模式="缩放图像" @绑定事件_单击="方法层.底部导航点击事件(data.文字名称,index)"></图片框>
            <文本框 类名="底部导航-文字">{{data.文字名称}}</文本框>
        </区块>
        <区块 类名="底部导航">
            <按钮 大小="迷你大小" 开放能力="contact" >
          <图片框 类名="底部导航-图片" 图像地址="@文件_在线客服.png" 缩放模式="缩放图像" @绑定事件_单击="方法层.底部导航点击事件('在线咨询')"></图片框>
        </按钮>
        <文本框 类名="底部导航-文字">在线咨询</文本框>
        </区块>
默认排序
Generic placeholder image
Generic placeholder image
1348****4381 Time: 2023-11-24 21:18:47
    .底部导航版块 {
        定位: 固定;
        底部: 0px;
        宽度: 计算(100% - 15px);
        高度: 55px;
        显示模式: 弹性布局;
        内边距: 0rpx 15px;
        背景-颜色: 颜色值-白色;
    }
    .底部导航 {
        弹性布局: 1;
        显示模式: 弹性布局;
        弹性布局-方向: 垂直显示;
        对齐-项目: 居中;
        内容对齐: 居中;
    }
    .底部导航-图片 {
        宽度: 100rpx;
        高度: 100rpx;
        上内边距: 10rpx;
    }
    .底部导航-文字 {
        内边距: 3rpx 0rpx;
        字体-大小: 22rpx;
    }

 

这个是自定义的CSS代码, 第四个是按钮,我想和前面三个的效果一样,因为调用小程序客服 需要 按钮组件;

Generic placeholder image
qiang Time: 2023-11-25 11:56:09

给按钮添加类名,重置样式,设置图片大小。

<按钮 类名="按钮样式" 大小="迷你大小" 开放能力="contact">

.按钮样式 {
    背景: 无效;
}
.按钮样式:after{
    显示模式: 无效;
}
Generic placeholder image
1348****4381 回复 2楼 qiang Time: 2023-11-25 12:33:07
    .底部导航-图片 {
        宽度: 100rpx;
        高度: 100rpx;
        上内边距: 10rpx;
    }

我这样设置的,显示还是怪怪的;

Generic placeholder image
qiang 回复 3楼 1348****4381 Time: 2023-11-25 13:39:02

估计是原图的问题,调整原图大小尺寸。

Generic placeholder image
1348****4381 回复 4楼 qiang Time: 2023-11-25 13:40:04

我上面的就正常,图片大小和前面三个是一样的

Generic placeholder image
qiang 回复 5楼 1348****4381 Time: 2023-11-25 13:59:39

那就猜不到了,你打包一个可以运行的发出来看看。

Generic placeholder image
1348****4381 回复 6楼 qiang Time: 2023-11-25 14:48:52

好,原代码我也都附上的啊,二个贴里的就是原代码

Generic placeholder image
qiang 回复 7楼 1348****4381 Time: 2023-11-25 15:02:58

光有代码,我也不能直接用啊,没图片文件,没数据层数据,最好就是可以直接运行的代码,不然没法测试。


CSS按钮如何重写