height: calc(100vh - 80rpx);
时间: 2024-05-22 14:12:02 浏览: 8
This CSS rule sets the height of an element to be the viewport height (100vh) minus 80rpx. The viewport height is the height of the browser window, and 1vh is equal to 1% of the viewport height. The 80rpx value is a relative unit that represents 80 pixels on the screen. Therefore, this rule will make the element take up most of the screen height, with a small margin of 80 pixels at the bottom.
相关问题
如何在下列代码中将SwipeCell组件放在van-card组件内部,并将删除按钮放在SwipeCell组件的right slot中,商品信息放在SwipeCell组件的default slot中。组件van-card代码如下:——index.json——{ "component": true, "usingComponents": { "van-card": "@vant/weapp/card/index", "van-stepper": "@vant/weapp/stepper/index", "van-swipe-cell": "@vant/weapp/swipe-cell/index" } } ——wxml——<view class="goods-card"> <radio disabled="{{ goodsData.amount <= 0 }}" bind:tap="changeChecked" class="goods-card-radio" checked="{{ goodsData.amount <= 0 ? false : goodsData.checked }}" color="#ff6034" /> <van-card custom-class="flo-goods-card" style="flex: 1; height:calc(42vh - 50px)" tag="{{ goodsData.amount > 0 ? '' : '售磬' }}" price="{{ goodsData.price || '' }}" title="{{ goodsData.title || '' }}" thumb="{{ goodsData.showPictures || '' }}"> <view slot="num"> <van-stepper disabled="{{ goodsData.amount <= 0 }}" style="position: absolute; right: 0rpx; top: 75%;" input-width="42rpx" button-size="45rpx" theme="round" bind:change="changeValue" value="{{ goodsData.value }}" step="1" /> </view> </van-card> </view>
你可以在van-card组件内部添加van-swipe-cell组件,并将商品信息放在SwipeCell组件的default slot中,将删除按钮放在SwipeCell组件的right slot中。代码如下:
```
<view class="goods-card">
<radio disabled="{{ goodsData.amount <= 0 }}" bind:tap="changeChecked" class="goods-card-radio" checked="{{ goodsData.amount <= 0 ? false : goodsData.checked }}" color="#ff6034" />
<van-card custom-class="flo-goods-card" style="flex: 1; height:calc(42vh - 50px)" tag="{{ goodsData.amount > 0 ? '' : '售磬' }}" price="{{ goodsData.price || '' }}" title="{{ goodsData.title || '' }}" thumb="{{ goodsData.showPictures || '' }}">
<van-swipe-cell right-width="65rpx">
<view slot="default">
<!-- 商品信息 -->
</view>
<view slot="right">
<!-- 删除按钮 -->
</view>
</van-swipe-cell>
<view slot="num">
<van-stepper disabled="{{ goodsData.amount <= 0 }}" style="position: absolute; right: 0rpx; top: 75%;" input-width="42rpx" button-size="45rpx" theme="round" bind:change="changeValue" value="{{ goodsData.value }}" step="1" />
</view>
</van-card>
</view>
```
uniapp小程序返回顶部
可以通过uni-app自带的scroll-view组件实现返回顶部的功能。具体实现方法如下:
1. 在scroll-view组件中添加一个按钮,用于返回顶部。
2. 给按钮添加点击事件,当点击按钮时,通过scroll-view组件的scroll-top属性将滚动条滚动到顶部。
示例代码如下:
```
<template>
<view class="container">
<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop">
<!-- 此处省略scroll-view中的内容 -->
</scroll-view>
<view class="back-to-top" @click="backToTop">返回顶部</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0 // 初始滚动条位置为0
}
},
methods: {
backToTop() {
this.scrollTop = 0 // 将滚动条滚动到顶部
}
}
}
</script>
<style>
.container {
position: relative;
height: 100vh;
}
.scroll-view {
height: calc(100vh - 100rpx);
}
.back-to-top {
position: absolute;
bottom: 20rpx;
right: 20rpx;
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: #333;
color: #fff;
border-radius: 50%;
}
</style>
```