Horizontal sliding of applets

The horizontal sliding of the applet can be realized by using the scroll-view component of the applet. The specific steps are as follows:

1. Add the scroll-view component in the wxml file, set the attribute horizontal to true, and set the width and height at the same time;

<scroll-view class="scroll-view" scroll-x="true" scroll-y="false" style="width: 100%; height: 200rpx;">
  <!-- 内容部分 -->
</scroll-view>

1. Set the style of the scroll-view component in the style file, such as setting the width of the internal element to a fixed value and forcing a line break;

.scroll-view {
  white-space: nowrap;
  display: inline-flex;
}
.scroll-view > .scroll-item {
  width: 200rpx;
  margin-right: 10rpx;
}

1. Dynamically set the data of the internal elements of the scroll-view component in the js file, for example, use wx:for to loop through the array and render the array elements as child elements of the scroll-view component.

<scroll-view class="scroll-view" scroll-x="true" scroll-y="false" style="width: 100%; height: 200rpx;">
  <block wx:for="{
   
   {list}}" wx:key="{
   
   {index}}">
    <view class="scroll-item">{
   
   {item}}</view>
  </block>
</scroll-view>

In this way, a small program page that can slide horizontally can be realized.