Slide the list horizontally, you can use tags:
1：scroll-view
2：swipe
3：overflow-x
Generally speaking, if you slide horizontally, you need special settings. If you only use the view to set display: flex, you cannot slide horizontally, and the one on the right will be hidden. If you set the horizontal direction, the following three ways.
One: scroll-view
In addition to the horizontal, vertical, and horizontal sliding of scroll-view mentioned on the official website, if you encounter some problems here, write them down.
Applicable situation:
Horizontal: the content height is consistent, (if not, scroll-view will automatically align with the bottom to form a mountain peak, see the picture below)
I've tried some settings, but I can't make it top-aligned and have the same height through direct settings. So if you have to use this, you can use an auxiliary method: set the content in the list by yourself to make the number of content items the same, and you can set the color and background of the content you set to achieve visual alignment.
If you want to use scroll-view is also very simple, three elements are necessary
1: scroll-x or scroll-y
2：white-space: nowrap;
3: Set display: inline-block; in the sub-label.
If you just want to use scroll-view, you can also take a roundabout tactic: instead of using list directly inside scroll-view, wrap a layer of view, use list inside this view, so that there is only one item in scroll-view, This will only expand the view, so it can achieve the effect that cannot be achieved now, and can be top-aligned.
二：swipe
or use swiper
<swiper :indicator-dots="false" :circular="true" :autoplay="true" display-multiple-items="2" class="banner">
<swiper-item class="swiper-item" v-for="(item,index) in list2":key="index">
<p>{
{item}}</p>
</swiper-item>
</swiper>If you want to set this control so that it is not a full page, it needs to be set separately for a long time.
The width of the swiper can not be set, if not set, it will automatically wrap to the entire page at the last position.
The swiper-item cannot set the distance from the left to the right. It has been set before, but there will be many small bugs. So don't use this. But this can set the width. According to the official website, even if the width is not set, the content cannot be automatically expanded.
If you use this, there will be a problem, that is, the far right cannot be as correct as the scrollview (if the inner item is not a whole page). As a result, the right side will always be empty. And if the width of the swiper is set at this time, it will not be very suitable, because if the setting is small, the width is small, so there will be edges.
Detour strategy : Same as scroll-view above, only one swiper-item is used, and the content list is inside the swiper-item. Just one should be fine. After setting it up, I found that because of the characteristics of the swiper, when swiping, you can only swipe one page, and you can’t stay in the middle of this page, so you can’t swipe through it all the time. This is not applicable.
Three: overflow-x
Set horizontal scrolling, just set it for ordinary view
overflow-x: auto;
display: -webkit-box;
overflow-y: hidden;hide horizontal scrollbar
::-webkit-scrollbar {
display: none;
}<view class="viewsc">
<view class="viewscli" v-for="(item, index) in list" :key="index">
<!-- {
{item}} -->
<view class="swiper-item22" v-for="(itemli, indexli) in item" :key="indexli">
{
{itemli}}
</view>
</view>
</view>
.viewsc {
margin-top: 100px;
background-color: antiquewhite;
color: black;
display: flex;
overflow-x: scroll;
/* overflow-y: hidden; */
display: -webkit-box;
height: 200px;
.viewscli {
margin-right: 10px;
/* display: flex; */
/* flex-direction: row; */
}
}
::-webkit-scrollbar {
display: none;
}