做lol直播网站,设计一个公司网站多少钱,公司有网站有什么好处,重庆建站公司费用实现功能#xff1a;
自定义一个进度条#xff0c;能手动拖动进度条#xff0c;也可以点击相应的进度#xff0c;根据当前进度条的进度显示相应的内容。
效果图#xff1a; 实现代码#xff1a;
封装组件#xff1a;
templateview classboomBg
自定义一个进度条能手动拖动进度条也可以点击相应的进度根据当前进度条的进度显示相应的内容。
效果图 实现代码
封装组件
templateview classboomBgview classhuiBg clickclickBoom/viewview classboomBlock :animationanimationData1!-- :animationanimationData1 --image classboomTitle modeheightFix :srcboomTitle/imageimage classboomImgBg modewidthFix clickclickBoom :srcboomImg/imageview classcententBlock!-- 入院前的tab和内容 --view v-ifshipBoomIdx0||shipBoomIdx4view classboom1Tabsview :classchildTypeIdxidx?boom1TabItemIn:boom1TabItemNo clickchildTypeIdxidxv-for(item,idx) in listGliomaObj[tipIdx].childTypeListtext{{item.childType}}/text/view/viewview classboom1Cententview v-for(item,idx) in listGliomaObj[shipBoomIdx].childTypeList[childTypeIdx].detailview v-ifitem.content classboom1CTxt v-htmlitem.content/view/view/view/viewviewv-ifshipBoomIdx1||shipBoomIdx2||shipBoomIdx3||shipBoomIdx5||shipBoomIdx6||shipBoomIdx7stylemargin-top: 20rpx;height: 784rpx; classboom1Cententview classboom1CItem v-for(item,idx) in listGliomaObj[shipBoomIdx].detailview v-ifitem.title classboom1CTBlockimage classboom1CIcon modewidthFix :srctitleIcon/imageview classboom1CTitle{{item.title}}/view/viewview classboom2CTxt v-htmlitem.content/view/view/viewimage classrightS modeheightFix :srcrightS/image/viewview classbottomBlockview classtips p_rview v-for(item,idx) in listGliomaObj clickchangeTipIdx(idx):class[idx%20?tipItemTop:tipItemB,tipIdxidx?tipIn:tipNo]{{item.type}}view v-ifidx%20 classtriangleTop :style{left:triangleLeft(idx)}/viewview v-ifidx%2!0 classtriangleBottom :style{left:triangleLeft(idx)}/view/view/viewview classbottomTiaoBj1/viewview classbottomTiaoBj2/viewview classbottomTiaoBj3 :style{width:bottomTiaoBj3Width px}/viewview classbottomTiaoXin :style{left:bottomTiaoXinLeft px}/viewmovable-area scroll-xtrue classscroll-Xmovable-view directionhorizontal :xmovableX :friction1 inertiafalse changemovableChangeimage classbottomTiaoQuan :srcSBtn/image/movable-view/movable-area/view/view/view
/template
scriptlet imgPath https://xxx/glioma/boom/export default {props: [shipIdx, listGliomaObj],data() {return {shipBoomIdx: 0,childTypeIdx: 0,titleIcon: imgPath titleIcon.png,SBtn: imgPath SBtn.png,boomImg: ,rightS: imgPath rightS.png,boomTitle: ,animationData1: {},boom1: imgPath boombg1.png,boom2: imgPath boombg2.png,// days: [入院前, 入院日, 病情评估, 手术日, 术后处理, 出院日, 病情结果回报, 后续治疗],tipIdx: 0,bottomTiaoBj3Width: 35,bottomTiaoXinLeft: 27,movableX: 0,btnLefts: [0, 34, 66, 102, 136, 170, 204, 280],};},watch: {},created() {this.shipBoomIdx this.shipIdx;this.showShipBoomFc()this.changeTipIdx(this.shipBoomIdx)console.log(创建);},methods: {movableChange(e) {let left e.detail.xthis.bottomTiaoXinLeft left 26this.bottomTiaoBj3Width left 34let aa this.getClosestNum(left, this.btnLefts)this.btnLefts.forEach((item, idx) {if (item aa) {if (this.tipIdx idx) returnthis.boomTitle imgPath title (Number(idx) 1) .pngthis.tipIdx idx;this.shipBoomIdx idx;}})// this.movableX this.btnLefts[this.tipIdx]},// 点击下面的文案,切换changeTipIdx(idx) {this.tipIdx idx;this.shipBoomIdx idx;this.movableX this.btnLefts[idx]this.bottomTiaoXinLeft this.movableX 26this.bottomTiaoBj3Width this.movableX 34this.boomTitle imgPath title (Number(idx) 1) .pngthis.childTypeIdx 0;console.log(点击目标,this.movableX);},showShipBoomFc() {let idx this.shipBoomIdx || 0this.boomTitle imgPath title (Number(idx) 1) .pngthis.boomImg this.boom1;console.log(显示弹窗, this.shipIdx, this.shipBoomIdx);// if (idx 0) {// this.boomImg this.boom1;// } else {// this.boomImg this.boom1;// }var animation uni.createAnimation()animation.scale(0.01).opacity(0).step({duration: 50})this.animationData1 animation.export();setTimeout(() {animation.scale(1).opacity(1).step({duration: 500})this.animationData1 animation.export();}, 100)},// JS取一个数在数组中最近的数getClosestNum(target, array) {let closest array[0];let minDifference Math.abs(closest - target);for (let i 1; i array.length; i) {const difference Math.abs(array[i] - target);if (difference minDifference) {closest array[i];minDifference difference;}}return closest;},close() {this.$emit(closeShipBoom)},clickBoom() {var animation uni.createAnimation()animation.scale(0.01).opacity(0).step({duration: 10})this.animationData1 animation.export();this.animationData1.actions[0].animates []this.$emit(closeShipBoom)},triangleLeft(idx) {if (idx 0 || idx 1 || idx 3 || idx 5) {return 18rpx} else if (idx 2 || idx 4 || idx 7) {return 26rpx} else if (idx 6) {return 40rpx}},},};
/scriptstyle langscss scoped.boom2CTxt {max-width: 100%;::v-deep img {max-width: 100%;}}.boomBg {width: 100%;height: 100vh;position: fixed;z-index: 991;.triangleTop {width: 0;height: 0;position: absolute;bottom: -4px;border-top: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}.triangleBottom {width: 0;height: 0;position: absolute;top: -4px;border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}.bottomBlock {position: absolute;bottom: 0rpx;width: 100%;height: 122rpx;z-index: 9994;// background-color: #fff;.bottomTiaoBj1 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #fff;width: 100%;height: 40rpx;}.bottomTiaoBj2 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #D3ECE3;width: 97.5%;left: 1%;margin-top: 6rpx;height: 28rpx;-webkit-box-shadow: #949494 5rpx 5rpx 5rpx;}.scroll-X {position: absolute;top: 44rpx;border-radius: 50rpx;// background-color: #ffff00;left: 1%;margin-top: -26rpx;height: 28rpx;width: 84%;.bottomTiaoQuan {width: 58rpx;height: 60rpx;border-radius: 50%;position: absolute;top: 16rpx;margin-left: 35px;}}.bottomTiaoBj3 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #28949C;left: 1%;margin-top: 6rpx;height: 28rpx;}.bottomTiaoXin {width: 18rpx;height: 18rpx;background: #88C8C6;border-radius: 50%;position: absolute;top: 56rpx;border-radius: 50%;}.tips {font-size: 16rpx;font-family: Source Han Sans CN;font-weight: bold;color: #28949C;margin-left: 80rpx;}.tipIn {color: #28949C;background-color: #fff;padding: 4rpx 4rpx 4rpx 4rpx;border-radius: 6rpx;}.tipNo {color: #000;background-color: #fff;padding: 4rpx 4rpx 4rpx 4rpx;border-radius: 6rpx;}.tipItemTop {position: relative;margin-right: 4rpx;// margin-right: 10rpx;}.tipItemB {position: relative;margin-right: 4rpx;top: 100rpx;}}.huiBg {width: 100%;height: 100vh;position: fixed;z-index: 992;background-color: rgba(0, 0, 0, 0.5);}.boomImgBg {width: 100%;position: absolute;z-index: 9991;top: -34rpx;}.boomBlock {position: relative;top: 200rpx;z-index: 993;width: 628rpx;left: 61rpx;height: 1130rpx;.boomTitle {position: absolute;z-index: 9992;height: 64rpx;top: 0rpx;left: 40rpx;}.cententBlock {position: absolute;z-index: 9993;width: 90%;top: 144rpx;left: 5%;}.boom1Tabs {display: flex;justify-content: space-between;text-align: center;font-size: 24rpx;.boom1TabItemIn {width: 282rpx;height: 74rpx;background: #28959D;color: #fff;border-radius: 10rpx;line-height: 30rpx;justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/display: -webkit-flex;}.boom1TabItemNo {width: 282rpx;height: 74rpx;background: #ffffff;color: #000;border-radius: 10rpx;line-height: 30rpx;justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/display: -webkit-flex;}}.boom1Centent {width: 100%;height: 724rpx;background: #ffffff;border-radius: 10rpx;margin-top: 10rpx;overflow-y: scroll;z-index: 9998;position: relative;overflow-x: hidden;.boom1CItem {position: relative;margin: 20rpx;.boom1CTBlock {width: 206rpx;height: 43rpx;position: relative;margin-bottom: 20rpx;.boom1CIcon {width: 206rpx;height: 43rpx;position: absolute;left: 0rpx;top: 0rpx;}.boom1CTitle {height: 43rpx;position: absolute;z-index: 9998;font-size: 23rpx;font-family: Source Han Sans CN;font-weight: bold;color: #ffffff;line-height: 46rpx;position: absolute;left: 54rpx;top: 0rpx;}}}.boom1CTxt {font-size: 28rpx;padding: 30rpx;}}.rightS {width: 50rpx;height: 222rpx;position: relative;z-index: 9995;// right: 28rpx;left: 596rpx;top: -600rpx;}}}
/style
调用组件
ShipBoom v-iflistGliomaObjshowShipBoom :listGliomaObjlistGliomaObj :shipIdxshipIdx closeShipBoomshowShipBoom false :showShipBoomshowShipBoom/ShipBoom
