初试小程序轮播组件

文章目录

一、轮播组件

(一)swiper组件

1、功能描述

  • 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

2、属性说明

属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color color #000000 当前选中的指示点颜色 1.1.0
autoplay boolean false 是否自动切换 1.0.0
interval number 5000 自动切换时间间隔 1.0.0
circular boolean false 是否采用衔接滑动 1.0.0

(二)swiper-item组件

1、功能描述

  • 仅可放置在swiper组件中,宽高自动设置为100%。

2、属性说明

属性 类型 默认值 必填 说明 最低版本
item-id string 该 swiper-item 的标识符 1.9.0
skip-hidden-item-layout boolean false 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 1.9.0

二、案例演示

(一)运行效果

  • 三张图片,手动轮播
  • 三张图片,自动循环轮播

(二)实现步骤

1、创建小程序项目

  • 项目名称:实现轮播图
  • 模板选择:不使用模板
  • 单击【确定】按钮

2、准备图片素材

  • 在项目根目录里创建images目录,拷贝三张图片

3、编写轮播图页面内容

  • 修改index.wxml文件
html 复制代码
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!--轮播图的结构-->
<swiper class="swiper-container" indicator-dots="true">
    <!--第一个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/spark.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <!--第二个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/mysql.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
    <!--第三个轮播图-->
    <swiper-item>
        <view class="item">
            <image src="/images/scala.png" mode="scaleToFill" style="width: 100%; height: 100%;" />
        </view>
    </swiper-item>
</swiper>

4、轮播图页面样式

  • 修改index.wxss文件
css 复制代码
/**index.wxss**/
.swiper-container {
    height: 150px;
}

.item {
    height: 100%;
    width: 100%;   
}

5、启动PC端自动真机测试

  • 三张图片,手动轮播

6、实现自动循环轮播

  • 修改index.wxml文件,给轮播图组件添加属性
  • 启动PC端自动真机测试,查看效果
相关推荐
2501_916008892 小时前
iOS 不上架怎么安装?多种应用分发方式解析,ipa 文件安装、企业签名、Ad Hoc 与 TestFlight 实战经验
android·macos·ios·小程序·uni-app·cocoa·iphone
CRMEB定制开发5 小时前
PHP多商户接入阿里云识图找商品
android·阿里云·小程序·php·商城系统·微信商城·crmeb
00后程序员张5 小时前
iOS App 混淆实战,在源码不可用情况下的成品加固与测试流程
android·ios·小程序·https·uni-app·iphone·webview
说私域7 小时前
基于开源AI智能名片与链动2+1模式的S2B2C商城小程序研究:构建“信息找人”式精准零售新范式
人工智能·小程序·开源
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
说私域8 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在公益课裂变法中的应用与影响研究
人工智能·小程序
Tartly8 小时前
掌中智汇,运筹帷幄 - 全新ASUS华硕智汇商擎小程序上线
小程序
私人珍藏库8 小时前
[吾爱大神原创] wx小程序自动解包工具界面版1.0.0
小程序
2501_916013749 小时前
iOS 26 设备文件管理实战指南,文件访问、沙盒导出、系统变更与 uni-app 项目适配
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_915921439 小时前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview