微信小程序微信小程序 scroll-view的使用案例代码详解的使用案例代码详解
主要介绍了微信小程序 scroll-view的使用案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习
或工作具有一定的参考借鉴价值,需要的朋友可以参考下
scroll-view：滚动视图
使用view其实也能实现滚动，跟div用法差不多
而scroll-view跟view最大的区别就在于：scroll-view视图组件封装了滚动事件，监听滚动事件什么的直接写方法就行。
scroll-view纵向滚动添加属性scroll-y，然后写一个固定高度就行了，我主要说一下scroll-view的横向滚动scroll-x：
我使用了display: flex;布局，特么的直接写在scroll-view上面，显示出来的结果总是不对头，试了好多次，得到了下面两种写
法；
第二种在scroll-view上添加了enable-flex启用flex布局属性，启用后内部就能使用flex布局了，不然你会发现内部布局始终是纵向
的。
得到的效果是一样的，能使用scroll-view事件。
wxml：
<view class="order_item_body">
<scroll-view scroll-x="true" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}">
<view class="order_item_list">
<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
<image src="{{item.image}}" mode="widthFix"></image>
<text>{{item.count+index}}</text>
</view>
</view>
</scroll-view>
</view>
或
<scroll-view scroll-x bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}" enable-flex="{{true}}">
<view class="order_item_list">
<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
<image src="{{item.image}}" mode="widthFix"></image>
<text>{{item.count+index}}</text>
</view>
</view>
</scroll-view>
wxss：
.order_item_body{
width: 100%;
height: 196rpx;
}
.order_item_list{
/* width: 100%; */
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
/* border: 1px solid blue; */
}
.order_item_goods {
width: 200rpx;
height: 192rpx;
position: relative;
}
.order_item_goods>image {
width: 160rpx;
height: 160rpx;
margin: 16rpx 20rpx;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.order_item_goods>text {
height: 30rpx;
line-height: 30rpx;
评论0