小程序模板网

微信小程序 swiper scroll-view height设置自适应

发布时间:2018-04-18 10:42 所属栏目:小程序开发教程

分享者:kingrome2017,来自原文地址 
滑动tab选项卡 高度不能自适应问题

wxml

 

				
  1. <swiper id="swiper1" bindchange="intervalChange" current="{{mycurrent}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  2.  
  3. <!--软件著作权-->
  4. <swiper-item class="slide-swiper">
  5. <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  6.  
  7. <!--撑出top高度-->
  8. <view class="kong"></view>
  9. <view class="classname" wx:for="{{arr}}" wx:key="" catchtap="oncopydels" data-jc="{{item.FRJ_RJQC}}">
  10. <view class="title">{{item.FRJ_RJQC}}</view>
  11. <view class="smalltitle" hidden="{{show}}">
  12. <view class="jc">软件简称:</view>
  13. <view class="jc">{{item.FRJ_RJJC}}</view>
  14. </view>
  15. <view class="smalltitle" hidden="{{shows}}">
  16. <view class="jc">软件简称:</view>
  17. <view class="jc">暂无信息</view>
  18. </view>
  19. <view class="smalltitle">
  20. <view class="jc">登记号:</view>
  21. <view class="jc">{{item.FRJ_DJH}}</view>
  22. </view>
  23. <view class="smalltitle">
  24. <view class="jc">登记批准日期:</view>
  25. <view class="jc">{{item.FRJ_IDT}}</view>
  26. </view>
  27. </view>
  28. </scroll-view>
  29. </swiper-item>
  30.  
  31. <!--./软件著作权-->
  32.  
  33. <!--作品著作权-->
  34. <swiper-item class="slide-swiper">
  35. <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  36.  
  37. <!--撑出top高度-->
  38. <view class="kong"></view>
  39. <view class="classname" wx:for="{{proCopyRight}}" wx:key="proItem.FZD_ZPMC" wx:for-item="proItem" data-name="{{proItem.FZD_ZPMC}}" catchtap="proCopyRightTap">
  40. <view class="title">{{proItem.FZD_ZPMC}}</view>
  41. <view class="smalltitle">
  42. <view class="jc">类型:</view>
  43. <view class="jc">{{proItem.FZD_ZPLB}}</view>
  44. </view>
  45. <view class="smalltitle">
  46. <view class="jc">登记号:</view>
  47. <view class="jc">{{proItem.FZD_DJH}}</view>
  48. </view>
  49. <view class="smalltitle">
  50. <view class="jc">登记日期:</view>
  51. <view class="jc">{{proItem.FZD_DJDATE}}</view>
  52. </view>
  53. <view class="smalltitle">
  54. <view class="jc">完成日期:</view>
  55. <view class="jc">{{proItem.FZD_CZWCDATE}}</view>
  56. </view>
  57. <view class="smalltitle">
  58. <view class="jc">首次发表日期:</view>
  59. <view class="jc">{{proItem.FZD_FBDATE}}</view>
  60. </view>
  61. </view>
  62. </scroll-view>
  63. </swiper-item>
  64.  
  65. <!--./作品著作权-->
  66. </swiper>

js

 

				
  1. wx.getSystemInfo({
  2. success: function (res) {
  3. that.setData({
  4. clientHeight: res.windowHeight
  5. });
  6. }
  7. });

说明:  swiper组件包含scroll-view  是这次的纠结点



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23669.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询