小程序首页轮播图设计

效果图

微信小程序的数据详解

indicator-dots:是否显示面板指示点【默认false 】

indicator-color:指示点颜色【默认rgba(0, 0, 0, .3)】

indicator-active-color:当前选中的指示点颜色【默认#000000】

autoplay:是否自动切换【默认false】

interval:自动切换时间间隔【默认5000】

duration:滑动动画时长【默认500】

circular:是否采用衔接滑动【默认false】

vertical:滑动方向是否为纵向【默认false】

源码如下

index.wxml

html 复制代码
<view class="index-container">
  <view class="index-header">
    <van-search value="{{ searchInfo }}" shape="round" background="#9c7bf0" placeholder="请输入搜索内容" />
    <view class="index-swiper">
      <swiper class="myswiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#9c7bf0" autoplay="true" interval="5000" duration="500" circular="true">
        <swiper-item>
          <image class="swiper-img" mode="heightFix" src="../../images/swiper/shop1.png"></image>
        </swiper-item>
        <swiper-item>
          <image class="swiper-img" mode="heightFix" src="../../images/swiper/shop2.png"></image>
        </swiper-item>
      </swiper>
    </view>
  </view>
</view>

index.wxss

css 复制代码
.index-header {
  background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
  width: 100%;
  height: 190px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}
.index-swiper{
  padding: 10px;
}
.swiper-img {
  height: 140px;
}
相关推荐
丁总学Java2 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
编程千纸鹤7 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域7 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java19 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域20 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86820 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650221 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app