微信小程序--swiper中current问题

2019/2/22

indexwxml文件

indexjs文件

数组 imageArr 动态的改变数组的数量，

例如：当 imageArr 中的长度为4，轮播滚动到 3 ，current=3；此时swiper没有绑定current，并将 imageArr 的长度动态改为2，这会出现current还是3，导致swiper不显示的问题。

解决：

indexwxml 中在swiper中绑定current

indexjs 中增加current

以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在mainjs中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vueuse(VueAwesomeSwiper)

然后就可以在组件中使用该插件（要注意的是该插件有依赖，安装下css-loader和less-loader，不然会出现样式问题）

[html] view plain copy

<template>

<div>

<swiper :options="swiperOption"  ref="mySwiper">

<!-- 这部分放你要渲染的那些内容 -->

<swiper-slide v-for="item in items">

</swiper-slide>

<!-- 这是轮播的小圆点 -->

<div class="swiper-pagination" slot="pagination"></div>

</swiper>

</div>

</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

components: {

swiper,

swiperSlide

},

data() {

return {

swiperOption: {

//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

notNextTick: true,

pagination: 'swiper-pagination',

slidesPerView: 'auto',

centeredSlides: true,

paginationClickable: true,

spaceBetween: 30,

onSlideChangeEnd: swiper => {

//这个位置放swiper的回调方法

thispage = swiperrealIndex+1;

thisindex = swiperrealIndex;

}

}

}

},

//定义这个sweiper对象

computed: {

swiper() {

return this$refsmySwiperswiper;

}

},

mounted () {

//这边就可以使用swiper这个对象去使用swiper官网中的那些方法

thisswiperslideTo(0, 0, false);

}

}

</script>

<style>

</style>

事件，pc端mouthmove，m端touchmove，获取鼠标在屏幕的坐标，判断鼠标移动距离，移动后坐标减去开始的坐标，左右切换x相减，上下切换y相减，如果这个值符合你的那个一定距离就切换。

1、在MYSQL中新建一个test数据库，在里面新建一张type数据表，下面将从该表获得数据。

2、新建一个project小程序项目。

3、在project项目内，新建一个index模块来从数据库获得数据，并将数据输出在indexwxml页面。

4、在index模块中indexjs页面，在onLoad中使用wxrequest方法向服务端文件请求数据。url为请求数据的地址；data为传输的参数，这里设置为空；method为传递参数的方式，header用于设置请求的数据类型，success是成功获得数据后的 *** 作。

5、在indexwxml页面，使用for循环遍历输出indexjs传递过来的数据data，通过item将data数据输出在页面。

6、在服务端新建一个apiphp页面来接收微信小程序的数据请求。

7、最后编译微信小程序，查看从数据表type获得数据内容，成功从数据库读取数据并输出在页面上。

你的list集合拿到后的数据格式是什么样的？StringObjectjson前两种的话会麻烦些，json的话就简单了。String和Object可能需要自己去写遍历方法，json可以直接循环出来

以上就是关于微信小程序--swiper中current问题全部的内容，包括:微信小程序--swiper中current问题、vue awesome swiper运行的时候怎么不加载css样式、使用swiper组件制作选项卡，如果a页面滚动了一定距离，然后切换到b页面时，b页面也滚动，怎么办等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！