Vue中，父组件列表引入每一个子组件元素的时候，可以在父组件的CSS文件中设置子组件的margin，可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等，那么在小程序中是如何实现的呢？

父组件：
WXML

  <view class="getnotice-list">
    <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"/>
  </view>

WXSS

.getnotice{
  padding: 32rpx 40rpx;
  background: #ffffff;
  .hasMarginTitle{
    margin-bottom: 32rpx;
  }

  &-list{
    display: flex;
    flex-direction: column;
    &-item{
      margin-bottom: 16rpx;
    }

    &-item:last-child{
      margin-bottom: 0;
    }
  }
}

子组件t-notice-item：

但有一个前提，就是父组件的list要设置对于子组件布局的控制，否则不会生效

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

# 小程序
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue