小程序首页轮播图设计

效果图

微信小程序的数据详解

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;
}
相关推荐
qq_174482857516 小时前
基于微信小程序的小动物救助领养平台
微信小程序·小程序
wcy011221 小时前
微信小程序+Vant-自定义选择器组件(单选带筛选
微信小程序·小程序
Fresh-eyes1 天前
iphone小程序设置burpsuite代理抓包
运维·服务器·小程序
paterWang1 天前
小程序-基于java+SpringBoot+Vue的铁路订票平台小程序设计与实现
java·spring boot·小程序
流着口水看上帝1 天前
一文掌握如何用python开发小程序
python·小程序
非著名程序员1 天前
15分钟做完一个小程序,腾讯这个工具有点东西
小程序
1登峰造极1 天前
uniapp中uni-popup在小程序中滚动穿透问题
小程序·uni-app
我很苦涩的1 天前
原生微信小程序画表格
微信小程序·小程序·notepad++
家里有只小肥猫1 天前
微信小程序上传启用组件按需注入
微信小程序·小程序
美物街1 天前
如何搭建一个小程序:从零开始的详细指南
微信小程序·小程序·个人开发