小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如图所示，这是在IOS上的显示，用手左右拖会有弹性，在安卓上不会有，不是溢出，如果引入组件就没有问题，不只有有没有哪位遇到过这种问题
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我遇见过，不过我调试了很久，发现其实还是我界面左右距离超了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
我把自定义的组件去掉后它就不会有弹性了，只要引用了组件的页面都可以左右弹，不是溢出的原因
你的自定义组件复杂吗？可以直接贴出代码或者做成代码片段吗？
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
组件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>
</form>
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;
margin-top: 2vw;
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;
flex: 1;
text-decoration: line-through;
.newProductList .producBottom .icon_car {
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
border-radius: 15rpx;
color: #000;
border: 1rpx solid #999;
引用JSON
"usingComponents": {
"productList": "../../components/productList/productList"
},
引用WXML
<productList>
</productList>
现在才写布局,所以没有数据
拷贝了你贴的代码，无论是作为组件，还是作为页面，iOS上都不会有左右滑的情况哦。。是不是全局的wxss有啥影响呢
我刚刚自己也重新起了个，也没有这个问题，现在在一个个排除
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
我遇见过，不过我调试了很久，发现其实还是我界面左右距离超了
我把自定义的组件去掉后它就不会有弹性了，只要引用了组件的页面都可以左右弹，不是溢出的原因
你的自定义组件复杂吗？可以直接贴出代码或者做成代码片段吗？
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
组件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>
现在才写布局,所以没有数据
拷贝了你贴的代码，无论是作为组件，还是作为页面，iOS上都不会有左右滑的情况哦。。是不是全局的wxss有啥影响呢
我刚刚自己也重新起了个，也没有这个问题，现在在一个个排除![]()