小程序动态高度scroll-view

 <view class="selectTitle" style=''>选择配送时间</view>
      <scroll-view scroll-y scroll-with-animation style="height:{{distributionTime.length>=3?162:''}}px">
        <view class="selectDate" wx:for="{{ distributionTime }}" wx:for-index="rightIndex" wx:key>
          <view class="{{item.index ==index?'activeDate': '' }}" data-index="{{ rightIndex }}" data-time="{{item.time}}" data-value="{{item.value}}" bindtap="chooseDate">{{item.time}}</view>
        </view>

      </scroll-view>
      <view class="timeBtn" bindtap='timeBtn'>确定</view>

如图所示 根据返回的长度动态生成日期,超出3项开始滚动
css:
.selectTitle{
  font-size: 32rpx;
  color:rgb(34,34,34);
  height:107rpx;
  line-height: 107rpx;
  background: #fff;
  font-family: 'Sim Hei'
}
.selectDate{
  font-size:26rpx;
  font-family: 'Microsoft Yahei';
  color:rgb(111,111,111);
  border-bottom: 1px solid rgb(221,221,221);
  height:106rpx;
  line-height: 106rpx;
  background: rgb(243,243,243);
  position: relative;
}
.timeBtn{
  height: 104rpx;
  line-height: 104rpx;
  font-size: 30rpx;
  color:rgb(102,102,102);
  background: #fff;
}
.activeDate::after {
   content: '\e633';
   font-family: 'iconfont';
   font-size: 30rpx;
   font-weight: 700;
   color: #4095f4;
   position: absolute;
   right: 42rpx;
   top: 0;
   height: 100rpx;
} 
js:
chooseDate(e) {
    var that = this,
      index = (e.currentTarget.dataset.index);
    that.setData({
      index: index,
      time_txt: e.currentTarget.dataset.time,
      privateDate: e.currentTarget.dataset.value
    });
 
  },

注:
distributionTime 为后台返回的所有配送时间数据

猜你喜欢

转载自blog.csdn.net/qinyongqaq/article/details/81065822