微信小程序之将轮播图设计为组件

在components文件夹上点右键,新建component,命名为swiper

然后将我们之前的代码都拷贝到对应文件中,

然后我们的页面要引用这个组件,

在pages\index\index.json中引入:

复制代码
{  
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "my-swiper":"../../components/swiper/swiper"
  }
}

在index.wxml中使用

复制代码
<view class="index-container">
  <view class="header">
    <van-search value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
    <my-swiper
      circular="{{swiperOption.circular}}"
      autoplay="{{swiperOption.autoplay}}"
      interval="{{swiperOption.interval}}"
      duration="{{swiperOption.duration}}"
      indicator-dots="{{swiperOption.indicatorDot}}"
    > 
    </my-swiper>
  </view>
</view>

pages\index\index.js 中数据

复制代码
Page({
  data: {
      value: '',
      swiperOption: {
        indicatorDot: true,
        autoplay: true,
        interval: 3000,
        circular: true,
        duration: 1000,
        indicatorColor:'#fff',
        indicatorActiveColor:'#fa2c19'
      }    
  },
  
})

pages\index\index.wxss 中之前swiper和image的样式要删除掉

复制代码
.header {
  background-image: -webkit-linear-gradient(botton, #f1503B, #c82519 50%);
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  width: 100%;
  height: 190px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

这样就好了!!

意外:

我发现indicator-dots的属性值传递不下去,组件中设置了false,无论调用的时候用什么值,轮播图指示器都不显示,同样,组件中indicator-dots属性设置了true,无论调用的时候用什么值,都会显示指示器,而其他属性改变了是可以改变轮播图的运行的,如果有哪位刚好知道,请告知解惑,谢谢!

相关推荐
2501_9159184114 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui5208614 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾15 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字15 小时前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台
じòぴé南冸じょうげん15 小时前
微信小程序如何进行分包处理?
前端·小程序
说私域17 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue1 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro