企业网站内容策划,电子商务网站的分类,单页面网站带后台,婚庆公司招聘效果图 微信小程序的数据详解
indicator-dots#xff1a;是否显示面板指示点【默认false 】
indicator-color#xff1a;指示点颜色【默认rgba(0, 0, 0, .3)】
indicator-active-color#xff1a;当前选中的指示点颜色【默认#000000】
autoplay#xff1a;是否自动切换…效果图 微信小程序的数据详解
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
view classindex-containerview classindex-headervan-search value{{ searchInfo }} shaperound background#9c7bf0 placeholder请输入搜索内容 /view classindex-swiperswiper classmyswiper indicator-dotstrue indicator-color#fff indicator-active-color#9c7bf0 autoplaytrue interval5000 duration500 circulartrueswiper-itemimage classswiper-img modeheightFix src../../images/swiper/shop1.png/image/swiper-itemswiper-itemimage classswiper-img modeheightFix src../../images/swiper/shop2.png/image/swiper-item/swiper/view/view
/view
index.wxss
.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;
}
