这块区域是横向滑动区域
盒子的高度是有的
但是给背景颜色就是没有铺满,给了一个border显示是这样的,求大佬解惑
scroll-view横向滚动最后一个盒子的背景颜色为什么铺不满,麻烦大佬解惑一下?Why is the background color of the last box of scroll-view horizontal scrolling unsatisfactory, please explain it?
scroll-view横向滚动最后一个盒子的背景颜色为什么铺不满,麻烦大佬解惑一下?这块区域是横向滑动区域
盒子的高度是有的
但是给背景颜色就是没有铺满,给了一个border显示是这样的,求大佬解惑
This area is a horizontal sliding area. The height of the box is certain, but the background color is not covered. It is shown in a border. Please ask the boss for help
回答:
给这个https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
天书一样的东西谁愿意多看两眼
<template> <view class="goodsDetail-box" :class="isMore ? 'max-height' : ''"> <view class="title-line"> <text class="title">商品明细</text> <text @tap="isMoreChange" v-if="isMore" class="icon iconleft-arrow-copy"></text> <text v-else @tap="isMoreChange" class="icon iconbottom-arrow"></text> </view> <view class="goodsList" v-for="(item,index) in goodsList" :key="index"> <view class="goods-top"> <view class="goods-image"> </view> <view class="goods-type"> <view class="font-color">{{item.danhao}}</view> <view class=""> <text>{{item.type}}</text><text style="padding: 0 20rpx;">{{item.color}}</text> </view> <view class="flex"> <text class=""> 吊牌价:¥{{item.amout}} </text> <text class=""> 发货类型:{{item.goodsWillType}} </text> </view> </view> </view> <view class="name-code"> <view class="name"> <view class="bg-w">尺码</view> <view :class="indext % 2 ? 'bg-w' : ''" v-for="(itemt,indext) in item.data" :key="indext"> {{itemt.size}} </view> </view> <view class="code-type"> <scroll-view scroll-x="true" class="tabs_container"> <view :key="indexd" class="tabs_item" v-for="(itemd,indexd) in item.SUMMARY"> <view class="bg-w"> {{itemd.typeName}} </view> <view class="menus" :key="indexz" :class="indexz % 2 ? 'bg-w' : ''" v-for="(itemz,indexz) in item.data"> <text :key="indexg" v-for="(itemg,indexg) in itemz.list"><text v-if="indexg == indexd">{{itemg.nums}}</text></text> </view> </view> </scroll-view> </view> </view> </view> </view></template><script> export default { data() { return { isMore: false } }, props: { goodsList: { type: Array, default: [] }, }, methods: { isMoreChange() { this.isMore = !this.isMore } }, }</script><style>.flex { display: flex; justify-content: space-between; align-items: center;}.font-color { color: #444;}.icon { font-size: 26rpx; padding-left: 30rpx;}.goodsDetail-box { margin: 20rpx; border-radius: 10rpx; background-color: #fff; max-height: 80rpx; transition: max-height 800ms; overflow: hidden;}.goodsDetail-box .title-line{ display: flex; line-height: 80rpx; align-items: center; justify-content: space-between; padding: 0 20rpx;}.max-height { max-height: 4000rpx;}.goodsDetail-box .title { font-weight: bold;}.goodsList .goods-top{ display: flex; padding: 0 20rpx;}.goodsList .goods-top .goods-image { width: 144rpx; height: 144rpx; border-radius: 4rpx;}.goodsList .goods-top .goods-type { padding-left: 20rpx; color: #999; flex: 1;}.goodsList .goods-top .goods-type view { line-height: 48rpx;}.name-code { display: flex; font-size: 26prx; margin: 20rpx; border-bottom: 1rpx solid #F3F3F3;}.name-code .name view { width: 120rpx; height: 80rpx; text-align: center; line-height: 80rpx; font-size: 26rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}.name-code .code-type { /* flex: 1; */ width: calc(100% - 120rpx);}.tabs_container { width: 100%; white-space: nowrap; height: 100%;}.tabs_item { min-width: 150rpx; height: 80rpx; line-height: 80rpx; display: inline-block; text-align: center; font-size: 26rpx;}.tabs_item view { padding: 0 20rpx;}.text-r { color: #FF004F;}.pageNoS { position: fixed; width: 100%;}.menus { padding: 0 20rpx;}.bg-w { background-color: #F8F8F8!important;} </style>
你设置了padding或者margin
样式问题要自己调试