小米网站制作,花店网站建设,wordpress使用视频教程,html导入wordpress需求
多个按钮根据弧度#xff0c;延边均匀排列。
实现
HTML
分两级#xff1b;第一级#xff0c;外层定义按钮的 compose-container 宽度#xff1b;第二级#xff0c;按钮集合#xff0c;使用方法 styleBtn(index)#xff0c;根据索引计算#xff1b;
div c…需求
多个按钮根据弧度延边均匀排列。
实现
HTML
分两级第一级外层定义按钮的 compose-container 宽度第二级按钮集合使用方法 styleBtn(index)根据索引计算
div classcompose-container flex-style-01div classbtn v-for(item, index) in btnNum :keyindex :stylestyleBtn(index){{ index }}/div
/divCSS
compose-container容器样式使用 flex 布局且设置 widthbtn按钮样式无需设置 display
.compose-container {display: flex;width: 600px;height: 80px;margin: 50px 0;background: #409eff;.btn {width: 50px;height: 50px;line-height: 50px;background: #aec0d1;border-radius: 50%;text-align: center;vertical-align: middle;}
}JavaScript
如下方法是计算按钮 translateY 值代码第 2 行传参是按钮的索引值从 0 开始代码第 4 行按钮的总个数代码第 6 行按钮垂直高度间隔单位 px代码第 8 行整体抬高也可不设置代码第 12 - 27 行区分偶数和奇数中心点计算代码第 29 行设置属性 translateY
// 按钮弧度高度
function styleBtn(index) {// 总个数const totalNum 8;// 间隔高度单位 pxconst gap 8;// 整体抬高const raiseHeight 28;let translateY if(totalNum%2 0) { // 偶数const centerIdx totalNum / 2;const n centerIdx - index;// 0 左侧 右侧translateY (n 0) ? n * gap : (Math.abs(n)1) * gap;}else { // 奇数const centerIdx Math.floor(totalNum / 2);const n centerIdx - index;if(centerIdx index) {// 中心点translateY gap;}else {translateY (Math.abs(n)1) * gap;}}return { transform: translateY(${(translateY - raiseHeight)}px) }
}效果
偶数
按钮个数为偶数中间两个按钮在同一条水平线上样式一justify-content: center根据按钮的 margin 属性设置间隔样式二justify-content: space-between两端对齐按钮之间的空间平均分配样式三justify-content: space-around按钮两侧空间相等但首尾按钮与容器边缘的空间是按钮之间空间的一半样式四justify-content: space-evenly所有间距包括首尾按钮与容器边缘的间距都相等 奇数
按钮个数为奇数中间一个按钮最高其它左右两侧在同一条水平线上justify-content 设置同上 完整代码
templatedivh4样式一justify-content: center 且设置btn margin /h4div classcompose-container flex-style-01div classbtn v-for(item, index) in btnNum :keyindex :stylestyleBtn(index){{ index }}/div/divh4样式二justify-content: space-between/h4div classcompose-container flex-style-02div classbtn v-for(item, index) in btnNum :keyindex :stylestyleBtn(index){{ index }}/div/divh4样式三justify-content: space-around/h4div classcompose-container flex-style-03div classbtn v-for(item, index) in btnNum :keyindex :stylestyleBtn(index){{ index }}/div/divh4样式四justify-content: space-evenly/h4div classcompose-container flex-style-04div classbtn v-for(item, index) in btnNum :keyindex :stylestyleBtn(index){{ index }}/div/div/div
/templatescript setup
import { ref } from vue;const btnNum ref(7);// 按钮弧度高度
function styleBtn(index) {// 总个数const totalNum btnNum.value;// 间隔高度单位 pxconst gap 8;// 整体抬高const raiseHeight 28;let translateY if(totalNum%2 0) { // 偶数const centerIdx totalNum / 2;const n centerIdx - index;// 0 左侧 右侧translateY (n 0) ? n * gap : (Math.abs(n)1) * gap;}else { // 奇数const centerIdx Math.floor(totalNum / 2);const n centerIdx - index;if(centerIdx index) {// 中心点translateY gap;}else {translateY (Math.abs(n)1) * gap;}}return { transform: translateY(${(translateY - raiseHeight)}px) }
}
/scriptstyle langscss scoped
.compose-container {display: flex;width: 600px;height: 80px;margin: 50px 0;background: #409eff;.btn {width: 50px;height: 50px;line-height: 50px;background: #aec0d1;border-radius: 50%;text-align: center;vertical-align: middle;}
}
.flex-style-01 {justify-content: center;.btn {margin: 0 6px;}
}
.flex-style-02 {justify-content: space-between;
}
.flex-style-03 {justify-content: space-around;
}
.flex-style-04 {justify-content: space-evenly;
}
/style
