微信小程序蓝色我登录的信息及货源导航设计制作开发教程

本文给大家带来的是微信小程序蓝色我登录的信息及货源导航设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/order/order.wxml-->
<view class="tool-tip " wx:if="{{popMsg}}">
    <text class="{{popType}}">{{popMsg}}</text>
</view>
<view class="stv-container">
    <view class="tab-bar">
        <view wx:for="{{tabs}}" wx:key="unique" data-index=
                "{{index}}" bindtap="handlerTabTap" class="tab {{activeTab==index?'tab-active':''}}" style="width: {{stv.windowWidth/tabs.length}}px">
            <text>{{item}}</text>
        </view>
        <view style="width: {{stv.lineWidth}}px; left: {{stv.offset/tabs.length}}px" class="under-line {{!stv.tStart? 'withAnimate': ''}}"></view>
    </view>
    <view class="scroll-view">
        <view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd"  class="scroll-view-wrapper {{!stv.tStart? 'withAnimate': ''}}" style="left: -{{stv.offset}}px">
            <view style="width: {{stv.windowWidth}}px;" wx:for="{{tabs}}" wx:key="unique" class="one-scene">
                <scroll-view style="height:100%" scroll-y>
                    <view wx:for="{{newsList}}" wx:for-item="item" wx:key="*this">
                        <view wx:if="{{isNotData}}" class="isNotDataHint">
                            <view class="iconfont icon-xiaoxi"></view>
                            <text>暂无未完成订单</text>
                        </view>
                        <view class="list">
                            <view class="item" >
                                <view class="h2">
                                    <text class="iconfont icon-markfill {{item.look==0?'energized':'grey'}} "
                                          style="font-size: 1rem!important;"></text>
                                    {{item.title}}
                                    <text class="status">{{item.look==0?'未读':'已读'}}</text>
                                    <text class="item-note right-1">{{item.createdate }}</text>
                                </view>
                                <view class="p" style="padding-left: 1.1rem; white-space: normal;">{{item.content}}</view>
                            </view>
                        </view>
                        <view class="padding-top"></view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</view>
<!--
<view class="swiper-tab row row-no-padding row-horizontal-around border-b">
    <view class="col-35 swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">未完成订单</view>
    <view class="col-35 swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">所有订单</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="200" style="height:{{newsList.length*81}}px"
        bindchange="bindChange">
    &lt;!&ndash; 未完成订单 &ndash;&gt;
    <swiper-item >

    </swiper-item>
    &lt;!&ndash; 所有订单 &ndash;&gt;
    <swiper-item>
        <view class="list">
            <view wx:if="{{isNotData}}" class="isNotDataHint">
                <view class="iconfont icon-xiaoxi"></view>
                <text>暂无所有订单</text>
            </view>
            <view class="list">
                <view class="item" wx:for="{{newsList}}" wx:for-item="item" wx:key="*this">
                    <view class="h2">
                        <text class="iconfont icon-markfill {{item.look==0?'energized':'grey'}} "
                              style="font-size: 1rem!important;"></text>
                        {{item.title}}
                        <text class="status">{{item.look==0?'未读':'已读'}}</text>
                        <text class="item-note right-1">{{item.createdate }}</text>
                    </view>
                    <view class="p" style="padding-left: 1.1rem; white-space: normal;">{{item.content}}</view>
                </view>
            </view>
            <view class="padding-top"></view>
        </view>
    </swiper-item>

</swiper>
-->

二、wxss样式文件代码如下：

/* pages/order/order.wxss */
.stv-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.withAnimate {
    transition: all 100ms ease;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
.stv-container .tab-bar {
    position: relative;
    display: flex;
    font-size: 30rpx;
    color: #666666;
}
.stv-container .tab-bar .tab-active {
    color: #00ACFF;
}
.stv-container .tab-bar .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16rpx;
    padding-bottom: 20rpx;
}
.stv-container .tab-bar .under-line {
    position: absolute;
    bottom: 0;
    height: 6rpx;
    background-color: #00ACFF;
}
.stv-container .scroll-view {
    position: relative;
    width: 100%;
    height: 100%;
    background: #e7eaef;
}
.stv-container .scroll-view .scroll-view-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
}
.stv-container .scroll-view .scroll-view-wrapper .one-scene {
    height: 100%;
}
.one-scene text {
    display: flex;
    justify-content: center;
    padding-top: 200rpx;
}

三、js页面代码如下：

// pages/order/order.js
//获取应用实例
var app = getApp();
var util = require('../../utils/util.js');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: ['未完成订单', '所有订单'],
        stv: {
            windowWidth: 0,
            lineWidth: 0,
            offset: 0,
            tStart: false
        },
        activeTab: 0,
        page: 1,
        hasData: true,
        isNotData: true,
        orderListArr: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        util.isLoginModal();
        try {
            let {tabs} = this.data;
            var res = wx.getSystemInfoSync()
            this.windowWidth = res.windowWidth;
            this.data.stv.lineWidth = this.windowWidth / this.data.tabs.length;
            this.data.stv.windowWidth = res.windowWidth;
            this.setData({stv: this.data.stv})
            this.tabsCount = tabs.length;
        } catch (e) {
            console.log(e);
        }
        //获取消息列表
        this.getOrderList(this.data.page);
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (!this.data.hasData) {
            return;
        }
        //获取消息列表
        this.getOrderList(this.data.page);
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    /**
     * 获取订单列表
     */
    getOrderList: function (page) {
        var that = this;
        util.https(app.globalData.api + "/api/MessagePush/getlist", "GET", {
                page: page,//页码
                size: 10,//条数
                userid: wx.getStorageSync("userid"),//用户id
                isHideLoad: true
            },
            function (data) {
                if (that.data.page == 1) {
                    that.setData({
                        newsListArr: []
                    })
                }

                for (var index in data.data.data_list) {
                    that.data.newsListArr.push(data.data.data_list[index]);
                }

                that.setData({
                    hasData: data.data.page_count == that.data.page ? false : true,
                    isNotData: (data.data == null || data.data.data_list == 0) ? true : false,
                    newsList: that.data.newsListArr
                })
                that.data.page++;

            }
        )
    }
    ,
    handlerStart(e) {
        let {clientX, clientY} = e.touches[0];
        this.startX = clientX;
        this.tapStartX = clientX;
        this.tapStartY = clientY;
        this.data.stv.tStart = true;
        this.tapStartTime = e.timeStamp;
        this.setData({stv: this.data.stv})
    },
    handlerMove(e) {
        let {clientX, clientY} = e.touches[0];
        let {stv} = this.data;
        let offsetX = this.startX - clientX;
        this.startX = clientX;
        stv.offset += offsetX;
        if (stv.offset <= 0) {
            stv.offset = 0;
        } else if (stv.offset >= stv.windowWidth * (this.tabsCount - 1)) {
            stv.offset = stv.windowWidth * (this.tabsCount - 1);
        }
        this.setData({stv: stv});
    },
    handlerCancel(e) {

    },
    handlerEnd(e) {
        let {clientX, clientY} = e.changedTouches[0];
        let endTime = e.timeStamp;
        let {tabs, stv, activeTab} = this.data;
        let {offset, windowWidth} = stv;
        //快速滑动
        if (endTime - this.tapStartTime <= 300) {
            //向左
            if (Math.abs(this.tapStartY - clientY) < 50) {
                if (this.tapStartX - clientX > 5) {
                    if (activeTab < this.tabsCount - 1) {
                        this.setData({activeTab: ++activeTab})
                    }
                } else {
                    if (activeTab > 0) {
                        this.setData({activeTab: --activeTab})
                    }
                }
                stv.offset = stv.windowWidth * activeTab;
            } else {
                //快速滑动 但是Y距离大于50 所以用户是左右滚动
                let page = Math.round(offset / windowWidth);
                if (activeTab != page) {
                    this.setData({activeTab: page})
                }
                stv.offset = stv.windowWidth * page;
            }
        } else {
            let page = Math.round(offset / windowWidth);
            if (activeTab != page) {
                this.setData({activeTab: page})
            }
            stv.offset = stv.windowWidth * page;
        }
        stv.tStart = false;
        this.setData({stv: this.data.stv})
    },
    _updateSelectedPage(page) {
        let {tabs, stv, activeTab} = this.data;
        activeTab = page;
        this.setData({activeTab: activeTab})
        stv.offset = stv.windowWidth * activeTab;
        this.setData({stv: this.data.stv})
    },
    handlerTabTap(e) {
        this._updateSelectedPage(e.currentTarget.dataset.index);
    }
})

模板简介：该模板名称为【微信小程序蓝色我登录的信息及货源导航设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。