微信小程序（上）_CMS教程

新接了一个做微信小程序的活，编码方式跟vue很相似，样式编写比普通css样式轻松的多，现要实现一个轮播图的效果。

请教了我的同学，她说小程序有两种方法能实现这个效果：

微信小程序—swiper组件文档

wxml文件：

js文件：

法一实现出来的效果图是酱紫的：

wxml文件：

js文件：

wxss文件：

用法二实现出来的效果图是酱紫的：

swiper

查询节点信息的对象。

wxcreateSelectorQuery

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 thiscreateSelectorQuery() 来代替。

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

在当前页面下选择匹配选择器 selector 的所有节点。

NodesRefboundingClientRect

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

function callback

回调函数，在执行 SelectorQueryexec 方法后，节点信息会在 callback 中返回。

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

是的，微信小程序中有一些组件可以实现类似表格不带边框的布局。以下是一些常用的组件：

1 view组件：可以用view组件来实现类似表格的布局。可以使用flex布局来控制子元素的排列方式。

2 swiper组件：可以使用swiper组件来实现多列的滑动列表，类似于表格的效果。

3 scroll-view组件：可以使用scroll-view组件来实现滚动列表，也可以通过设置样式来实现类似表格的效果。

4 rich-text组件：可以使用rich-text组件来渲染富文本内容，也可以通过设置样式来实现类似表格的效果。

需要注意的是，以上组件都需要根据实际需求来选择，并进行样式的调整，以达到最终的布局效果。

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<swiper-item>

</swiper-item>

</block>

</swiper>

<view class="{{dotsClass[2]}}"></vi

swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。

配置 circular="true" 属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。

//页面源码

1、swiper-item的key一定要设置，并且用 index 。

2、如果只有一张情况，不想让它来回滚动。可以设置 circular ，但是 circular 无法直接动态设置，我们可以使用 computed 来设置

以上就是关于微信小程序（上）全部的内容，包括:微信小程序（上）、微信小程序--swiper中current问题、微信小程序—用动画实现自定义轮播图等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

微信小程序（上）