更新记录

easyNswiper1.1.3（2021-08-04）

图片在zip包中。基于Weex的Nvue页面制作（flex布局），HbuilderX纯原生渲染app。

本人微信号（ jays611 ）：多谢大家观看，或者使用，如果存在bug，可以自己修复或提出。

easyNswiper1.1.2（2021-08-04）

最近纯js制作的nvue-app的swiper组件，flex布局，自定义提示标。

平台兼容性

easyNswiper实现Nvue-app中类似h5中的swiper功能

基于Weex的Nvue页面制作（flex布局），HbuilderX纯原生渲染app。

本人微信号（ jays611 ）：多谢大家观看，或者使用，如果存在bug，可以自己修复或提出。

欢迎大家优化，优化后希望发我一份，以便更新版本！谢谢分享，致敬开源。邮箱：862450460@qq.com

布局展示：

<view class="fx-position">
    <view class="conter" :style="{left: step+'px',transform: 'translateX('+step+')'}" @touchmove=""
            @touchstart="" @touchend="">
        <view class="swipe-item">
            <image class="item-img" style="" src="../../static/noteImgs/banner01.jpg"></image>
        </view>
        <view class="swipe-item">
            <image class="item-img" style="" src="../../static/noteImgs/banner02.jpg"></image>
        </view>
        <view class="swipe-item">
            <image class="item-img" style="" src="../../static/noteImgs/banner03.jpg"></image>
        </view>
    </view>
            <!-- dot -->
    <view class="dot-index">
            <text :class="step == active[0] ? 'dot-active':'dot-text'">◆</text>
            <text :class="step == active[1] ? 'dot-active':'dot-text'">◆</text>
            <text :class="step == active[2] ? 'dot-active':'dot-text'">◆</text>
    </view>
</view>

方法methods:

data(){
    return{
        step: 0,//整个swiper滑动像素px
        start: null,//touchstart 位置px
        halfPart: 0,//滑动距离是否超过一半（自定义偏移多少px切换下一个swiper-item）
        active: [0, -750, -1500],//可以方法计算好每个swiper-item的位置（单位px）
        end: null,//touchend 位置px
    }
}
methods: {
            (e){
                // console.log("move",e.changedTouches[0].pageX,this.start);
                let movePageX = e.changedTouches[0].pageX;
                this.step += movePageX - this.offset;
                this.offset = movePageX;
            },
            (e){
                this.start = e.changedTouches[0].pageX;
                this.offset = e.changedTouches[0].pageX;
            },
            (e){
                this.end = e.changedTouches[0].pageX;
                this.halfPart = this.end - this.start;
                if(Math.abs(this.halfPart) > 80){
                    this.onCalc();
                }else{
                    this.step = this.active[this.indx];
                }
            },
            onCalc(){
                if(this.start < this.end){
                    --this.indx;
                }else{
                    ++this.indx;
                }
                if(this.indx >= this.active.length-1){
                    this.indx = this.active.length-1;
                }else if( this.indx <= 0 ){
                    this.indx = 0;
                }
                this.step = this.active[this.indx];
            }
        }