微信 小程序组件 轮播(原始)
转载<!--1 轮播部分 -->
<view class="banner-box">
<swiper class="home-banner swiper" indicator-dots="true" autoplay="true" indicator-color="#F5A084" indicator-active-color="#ff3300" interval="3000" duration="1000">
<block wx:key="unique" wx:for="{{banners}}" wx:for-index="index">
<!-- 绑定数据 data-banner -->
<swiper-item bindtap="intoBanner" data-banner="{{item.id}}">
<image class="banner-img" src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
</view>
//------------------------------------------
/* 样式轮播部分 **********/
.banner-box{
/* position: relative; */
height: 300rpx;
}
.home-banner{
width: 100%;
height: 300rpx;
}
.home-banner image{
width: 100%;
height: 100%;
}
//------------------------------------------
// JS数据 轮播部分头部轮播数据
banners: [
{
id: 1,
url: '../../imgs/index/wear_1.png'
},
{
id: 2,
url: '../../imgs/index/wear_1.png'
},
{
id: 3,
url: '../../imgs/index/wear_1.png',
}
],
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:微信 小程序布局 左右三区块
下一篇:微信 小程序布局 水平菜单
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
微信小程序swiper轮播图组件使用
swiper基础库 1.0.0 开始支持,低版本需做兼容处理。滑块视图容器。其中只可
swiper javascript 小程序 滑块 边距 -
微信小程序|轮播图
欢迎点击「算法与编程之美」↑关注我们!本文首发于:"算法与编程之美"
轮播图 默认值 html -
微信小程序轮播图Swiper
布局:<!--pages/swiperdemo/swiperdemo.wxml--><view class="container">
javascript ide xml 轮播图 根目录 -
微信小程序组件编程