收藏
回答

使用组件开发后页面在IOS上左右两边有弹性

如图所示,这是在IOS上的显示,用手左右拖会有弹性,在安卓上不会有,不是溢出,如果引入组件就没有问题,不只有有没有哪位遇到过这种问题

最后一次编辑于  2018-09-03  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2018-09-03

    我遇见过,不过我调试了很久,发现其实还是我界面左右距离超了

    2018-09-03
    赞同
    回复 6
    • biu~
      biu~
      2018-09-03

      我把自定义的组件去掉后它就不会有弹性了,只要引用了组件的页面都可以左右弹,不是溢出的原因

      2018-09-03
      回复
    • 卢霄霄
      卢霄霄
      2018-09-03回复biu~

      你的自定义组件复杂吗?可以直接贴出代码或者做成代码片段吗?

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-09-03
      回复
    • biu~
      biu~
      2018-09-03回复卢霄霄

      组件WXML

      <view>

      <form bindsubmit='productDetail' report-submit='true' class='productListForm' wx:for='{{10}}'>

      <view class='newProductList'>

      <button plain='true' form-type='submit'></button>

      <image class='producListImg' src='http://img1.imgtn.bdimg.com/it/u=1916506251,3166036142&fm=26&gp=0.jpg'></image>

      <view class='producListTitle'>这是一整只鸡</view>

      <view class='producBottom'>

      <view class='proudcPrice'>¥128</view>

      <view class='originalPrice'>¥288</view>

      <view class='icon_car iconfont icon-gouwuche'></view>

      </view>

      </view>

      </form>

      </view>

      wxss


      .newProductList {

      width: 50%;

      height: 62vw;

      box-sizing: border-box;

      display: inline-block;

      background-color: #fff;

      }


      .newProductList:nth-child(odd) {

      border: 1rpx solid #e1e1e1;

      border-bottom: none;

      border-right: none

      }


      .newProductList:nth-child(even) {

      border-top: 1rpx solid #e1e1e1;

      }


      .newProductList .producListImg {

      display: block;

      width: 40vw;

      height: 40vw;

      margin: 1vw auto;

      }


      .newProductList .producListTitle {

      text-align: center;

      padding: 0 10rpx;

      font-size: 26rpx;

      line-height: 32rpx;

      height: 64rpx;

      color: #333;

      display: -webkit-box;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 2;

      overflow: hidden;

      }


      .newProductList .producBottom {

      display: flex;

      align-items: center;

      padding: 0 10rpx;

      margin-top: 2vw;

      overflow: hidden;

      height: 6vw;

      line-height: 6vw;

      }


      .newProductList .producBottom .proudcPrice {

      font-size: 30rpx;

      height: 100%;

      color: red;

      padding-right: 10rpx;

      }


      .newProductList .producBottom .originalPrice {

      font-size: 24rpx;

      color: #999;

      height: 100%;

      flex: 1;

      text-decoration: line-through;

      }


      .newProductList .producBottom .icon_car {

      width: 30rpx;

      height: 30rpx;

      line-height: 30rpx;

      text-align: center;

      border-radius: 15rpx;

      font-size: 26rpx;

      overflow: hidden;

      color: #000;

      border: 1rpx solid #999;

      }

      引用JSON

      "usingComponents": {

      "productList": "../../components/productList/productList"

      },

      引用WXML

      <productList>

      </productList>

      现在才写布局,所以没有数据

      2018-09-03
      回复
    • 卢霄霄
      卢霄霄
      2018-09-03回复biu~

      拷贝了你贴的代码,无论是作为组件,还是作为页面,iOS上都不会有左右滑的情况哦。。是不是全局的wxss有啥影响呢

      2018-09-03
      回复
    • biu~
      biu~
      2018-09-03回复卢霄霄

      我刚刚自己也重新起了个,也没有这个问题,现在在一个个排除

      2018-09-03
      回复
    查看更多(1)