我希望能够在包含未知高度图像的页面上保持垂直节奏。我找到了this，但使用的是vanilla-js而不是jquery，因此没有jquery插件。另一个答案要求在 javascript 中设置基线。我已经在我的SCSS文件中设置了它！我是一个非常懒惰的程序员，不想键入两次。等等，我没那么说。我的意思是我担心到处复制硬编码值的可维护性。
here是我不得不拒绝的另一个解决方案，因为我不喜欢样式方面的所有额外标记。这让我想起了曾经不得不将<div>标签嵌套四个深而使圆角变窄的日子。
我想到使用生成的内容将JSON传递给javascript。我以为自己是个天才，但后来发现this的示例也使用了完全相同的方法。
是否有更好的方法？
我真正想要的是一种指定元素高度必须为给定值的倍数的方法。真的只有CSS才能做到这一点吗？我见过的答案说没有。我觉得calc可以做到几乎，但还不足以解决问题。有没有更好的方法来获取javascript的价值？
谢谢。
答案 0 :(得分：0)
我想到最好使用CSS变量，然后按照here中的说明从javascript中读取这些值。
这具有以下优点
<template>
<div class="product-images-popup">
<div class="product-images-popup-modal">
<div class="product-images-popup-header">
</div>
<div class="product-images-popup-body">
<div class="product-images-popup-carousel_wrap">
<transition-group tag="div" class="product-images-popup-carousel">
<div
v-for="(imgUrl) in testImgs"
:key="imgUrl"
class="product-images-popup-slide"
>
<div v-touch:swipe.left="onSwipeLeft">
<div v-touch:swipe.right="onSwipeRight">
<img v-bind:src="imgUrl" />
</div>
</div>
</div>
</transition-group>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'
Vue.use(Vue2TouchEvents)
export default {
name: 'PopUpCarousel',
components: {
},
props: ['imagesProp'],
data() {
return {
//images: Vue.util.extend({}, JSON.parse(this.imagesProp.textContent)),
testImgs: [
"//cdn.shopify.com/s/files/1/0131/9514/9369/products/redpixie_small.jpg?v=1539581610",
"//cdn.shopify.com/s/files/1/0131/9514/9369/products/pixieside_small.jpg?v=1539581610",
"//cdn.shopify.com/s/files/1/0131/9514/9369/products/pixieback_574f736f-f149-4349-a55c-8acdc41639b7_small.jpg?v=1539581610",
"//cdn.shopify.com/s/files/1/0131/9514/9369/products/redpixie_332adf42-cae3-40c8-b820-63223ccde0e9_small.jpg?v=1539581610"
]
}
},
// compute
computed: {
},
methods: {
onSwipeLeft () {
console.log('left')
const last = this.testImgs.pop()
this.testImgs = [last].concat(this.testImgs)
// test
//console.log('-- test --')
//console.log(this.testImgs)
},
onSwipeRight () {
console.log('right');
const first = this.testImgs.shift()
this.testImgs = this.testImgs.concat(first)
// test
//console.log('-- test --')
//console.log(this.testImgs)
}
},
mounted() {
//console.log(JSON.stringify(images.textContent, null, 4));
//this.images = Object.assign({}, JSON.parse(this.imagesProp.textContent))
}
};
</script>
<style>
.product-images-popup {
position: fixed;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #fff;
transition: opacity .25s ease-in-out;
}
.product-images-popup-modal {
}
.product-images-popup-carousel_wrap {
display: flex;
/* top to bottom */
flex-direction: column;
/* center carousel */
align-items: center;
}
.product-images-popup-carousel {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 24em;
min-height: 25em;
}
.product-images-popup-slide {
/*grow, shrink, basis*/
flex: 0 0 20em;
height: 20em;
margin: 1em 1em 1em 1em;
display: flex;
justify-content: center;
align-items: center;
border: 0.1em solid #000;
/* transition */
transition: transform 0.3s ease-in-out;
}
.product-images-popup-slide:first-of-type {
opacity: 0;
}
.product-images-popup-slide:last-of-type {
opacity: 0;
}
</style>
伪元素的内容解析为JSON。
对于::after属性中的转义嵌入引号，浏览器显然不一致。一个缺点是自定义属性不像伪元素那样得到广泛支持。这种方式将在更多浏览器上中断。因为这只是化妆品，所以我认为可以接受。
contentconst foo = document.getElementsByClassName('foo')[0];
const bar = document.getElementsByClassName('bar')[0];
const fooStyles = window.getComputedStyle(foo);
const barStyles = window.getComputedStyle(bar);
const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');
const barVR = barStyles.getPropertyValue('--vertical-rhythm');
foo.innerHTML = '--vertical-rhythm: ' + fooVR;
bar.innerHTML = '--vertical-rhythm: ' + barVR;:root {
line-height: 1.5rem;
/* $line-height */
--vertical-rhythm: 3rem;
/* 2 * $line-height */
}
.foo {
--vertical-rhythm: 6rem;
/* 4 * $line-height */
}