以下是一个使用微信小程序实现满屏左右滑动幻灯片的示例代码：
index.wxml
<view class="swiper-container">
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="swiper-item-image" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
</view>
index.wxss
.swiper-container {
height: 100vh; /* 满屏高度 */
width: 100%;
}
.swiper {
height: 100%;
width: 100%;
}
.swiper-item-image {
height: 100%;
width: 100%;
}
index.js
Page({
data: {
imgUrls: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
],
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
interval: 5000, // 自动切换时间间隔
duration: 1000 // 滑动动画时长
}
});
代码解释：
index.wxml:
使用 swiper 组件来实现幻灯片效果。
swiper 组件包含多个 swiper-item，每个 swiper-item 包含一个 image 元素。
wx:for 指令根据 imgUrls 数组中的元素循环生成多个 swiper-item。
indicator-dots 属性用于显示面板指示点，方便用户查看当前是第几个幻灯片。
autoplay 属性设置为 true 使幻灯片自动播放。
interval 属性设置自动切换的时间间隔为 5000 毫秒。
duration 属性设置滑动动画的时长为 1000 毫秒。
image 的 mode 属性设置为 aspectFill 确保图片以合适的比例填充整个 swiper-item。
index.wxss:
.swiper-container 类设置容器的高度为 100vh（视口高度），实现满屏效果，宽度为 100%。
.swiper 类设置 swiper 组件的高度和宽度为 100%，确保它填满容器。
.swiper-item-image 类设置 image 的高度和宽度为 100%，确保图片填满 swiper-item。
index.js:
在 Page 的 data 中定义 imgUrls 数组存储图片的 URL 地址。
其他属性如 indicatorDots、autoplay、interval 和 duration 控制幻灯片的显示和播放行为。
使用说明：
将上述代码分别保存到对应的 index.wxml、index.wxss 和 index.js 文件中。
你可以修改 imgUrls 数组中的图片地址为你需要展示的图片。
你可以根据需要修改 indicatorDots、autoplay、interval 和 duration 等属性的值，以调整幻灯片的显示和播放效果。
如果你使用的是其他小程序开发框架，如支付宝小程序，也可以使用类似的结构，但组件和属性的名称可能会有所不同。你需要根据相应的开发文档进行调整。