微信小程序实现横向滑动

1.准备工作

首先，你需要在微信开发者工具中创建一个新的小程序项目，并选择模板中的“滑动型”模板。

2.编写 HTML 代码

在小程序的 wxss 文件中，我们需要设置一个容器来显示滑动内容。可以使用 flex 布局，如下所示：

.container{
display: flex;
overflow-x: scroll;
}

在 wxml 文件中，我们需要将滑动内容嵌套在容器中。可以使用 wx:for 循环来遍历滑动内容列表，如下所示：

<view class="container">
<view wx:for="{{list}}" class="item">{{item}}</view>
</view>

3.编写 JS 代码

在 JS 文件中，我们需要定义一个数组来存储滑动内容。可以使用 setData 方法来更新数据，如下所示：

Page({
data: {
list: ['item1', 'item2', 'item3', 'item4', 'item5']
},
onLoad: function () {
this.setData({
list: this.data.list.concat(this.data.list)
})
}
})

在 onLoad 生命周期中，我们可以使用 concat 方法将滑动内容复制一份，并将其添加到列表末尾，以便我们可以无限滑动。

4.完成效果

现在，您可以运行小程序并查看您的横向滑动效果。当您滑动屏幕时，您的内容应该会无限滚动。

相关问题

微信小程序 实现横向滑动菜单

实现横向滑动菜单的关键是使用scroll-view组件，并设置horizontal属性为true。同时，需要在scroll-view内部使用view组件来包裹横向菜单项。

以下是一个简单的示例代码：

<scroll-view scroll-x="true" class="menu">
  <view class="menu-item">菜单项1</view>
  <view class="menu-item">菜单项2</view>
  <view class="menu-item">菜单项3</view>
  <view class="menu-item">菜单项4</view>
  <view class="menu-item">菜单项5</view>
</scroll-view>

需要注意的是，为了让菜单项能够水平排列，需要在样式表中设置menu和menu-item的display属性为flex，并设置menu-item的flex属性为1，以便让每个菜单项占据相同的宽度。

.menu {
  display: flex;
}

.menu-item {
  flex: 1;
  text-align: center;
}

通过这样的方式，就可以实现一个简单的横向滑动菜单了。当然，如果需要更加复杂的效果，还可以通过JavaScript代码来动态设置菜单项的样式和交互行为。

vue 微信小程序 实现横向滑动菜单

在 Vue 微信小程序中，可以使用 wx-swiper 实现横向滑动菜单。

1. 在页面的 .vue 文件中，添加以下代码：

<view class="swiper">
  <swiper class="swiper-container" indicator-dots="false" autoplay="false" circular="false">
    <swiper-item class="swiper-item" wx:for="{{list}}" wx:key="index">
      <!-- 每个菜单项的内容 -->
      <view class="menu-item">{{item}}</view>
    </swiper-item>
  </swiper>
</view>

2. 在页面的 .vue 文件中，定义列表数据和样式：

data() {
  return {
    list: ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8', '菜单9'],
    currentIndex: 0
  }
},
methods: {
  // 点击菜单项时触发
  onItemClick(index) {
    this.currentIndex = index
  }
}

.swiper {
  height: 60rpx;
  overflow: hidden;
}

.swiper-container {
  height: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  color: #333;
}

.menu-item {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-bottom: 4rpx solid transparent;
}

.menu-item.active {
  border-bottom-color: #007aff;
}

3. 在菜单项的 view 标签中添加点击事件，并绑定 onItemClick 方法：

<view class="menu-item" :class="{active: currentIndex === index}" @tap="onItemClick(index)">{{item}}</view>

这样就可以实现一个简单的横向滑动菜单了。当用户点击菜单项时，菜单项的样式会变成选中状态。可以根据 currentIndex 属性来判断当前选中的菜单项，从而实现相应的逻辑。