在wx开发中swiper组件的使用
<div id="article_content" class="article_content clearfix"><link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
<div id="content_views" class="htmledit_views">
<p>在使用swiper组件中可以使用，</p>
<blockquote>
<p>data : {</p>
<p> imgs:[</p>
<p> ' 服务器传来的数组值1 '，</p>
<p> ' 服务器传来的数组值2 '，</p>
<p> ' 服务器传来的数组值3 '</p>
<p> ]</p>
<p>}</p>
</blockquote>
<p></p>
<p></p>
<p><span style="color:#fe2c24;">在wxss中可进行样式的调控</span></p>
<p></p>
<h1 id="swiper">swiper</h1>
<p>常用属性</p>
<p><span style="color:#ed7976;"><strong>autoplay 自动播放</strong></span></p>
<p><span style="color:#ed7976;"><strong>interval 指定播放间隔</strong></span></p>
<p><span style="color:#ed7976;"><strong>indicator-dots 出现面板指示点</strong></span></p>
<p><span style="color:#ed7976;"><strong>circular 是否采用衔接滑动</strong></span></p>
<p></p>
<table><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>必填</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>indicator-dots</td><td>boolean</td><td>false</td><td>否</td><td>是否显示面板指示点</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>indicator-color</td><td>color</td><td>rgba(0, 0, 0, .3)</td><td>否</td><td>指示点颜色</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.1.0</a></td></tr><tr><td>indicator-active-color</td><td>color</td><td>#000000</td><td>否</td><td>当前选中的指示点颜色</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.1.0</a></td></tr><tr><td>autoplay</td><td>boolean</td><td>false</td><td>否</td><td>是否自动切换</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>current</td><td>number</td><td>0</td><td>否</td><td>当前所在滑块的 index</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>interval</td><td>number</td><td>5000</td><td>否</td><td>自动切换时间间隔</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>duration</td><td>number</td><td>500</td><td>否</td><td>滑动动画时长</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>circular</td><td>boolean</td><td>false</td><td>否</td><td>是否采用衔接滑动</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>vertical</td><td>boolean</td><td>false</td><td>否</td><td>滑动方向是否为纵向</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>previous-margin</td><td>string</td><td>"0px"</td><td>否</td><td>前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.9.0</a></td></tr><tr><td>next-margin</td><td>string</td><td>"0px"</td><td>否</td><td>后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.9.0</a></td></tr><tr><td>snap-to-edge</td><td>boolean</td><td>"false"</td><td>否</td><td>当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">2.12.1</a></td></tr><tr><td>display-multiple-items</td><td>number</td><td>1</td><td>否</td><td>同时显示的滑块数量</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.9.0</a></td></tr><tr><td>easing-function</td><td>string</td><td>"default"</td><td>否</td><td>指定 swiper 切换缓动动画类型</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">2.6.5</a></td></tr><tr><td>bindchange</td><td>eventhandle</td><td></td><td>否</td><td>current 改变时会触发 change 事件，event.detail = {current, source}</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.0.0</a></td></tr><tr><td>bindtransition</td><td>eventhandle</td><td></td><td>否</td><td>swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">2.4.3</a></td></tr><tr><td>bindanimationfinish</td><td>eventhandle</td><td></td><td>否</td><td>动画结束时会触发 animationfinish 事件，event.detail 同上</td><td><ahref="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html">1.9.0</a></td></tr></tbody></table>
<p></p>
<p></p>
<p></p>
<p></p>
<p> </p>
</div>
</div>
<div id="treeSkill"></div>
页:
[1]