微信小程序之scroll-view选项卡与跳转 (一)
文章 2113 0 0 0
发布时间:2018年08月30日

大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳至与之相对应的选项卡中。所以我们在开发该小程序时也做了相同的功能。如下图:

但是我们在最后做交互的时候,并没有使用该效果,下篇再说这个!先说说这个效果是如何实现的!
选项卡静态布局思路: 主要用到 scroll-view与 swiper标签,选项卡切换主要依靠 swiper 中的 current 属性,不懂请自行查看小程序API。
跳转页面且跳至与之相对应的选项卡思路:
首先在 app.js 中配置 globalData。
在“个人中心” js 文件中配置点击该项跳转至与之对应的 tab 的 index。
在“个人中心”跳转页面时通过 globalData 传递 index 给“全部订单”页面,“全部订单”页面通过 app.globalData.currentLocation 接受数据,改变选项卡的切换。

app.js

globalData: {
    userInfo: null
}

个人中心 wxml 代码

<view class="page">
    <view class="pagebd">
        <view class="weui-grids">
            <view class="allrec" bindtap="allForm">
                <text>我的订单</text>
                <view class="more">查看更多订单</view>
                <image class='moreImg' src='../../img/more.png'></image>
            </view>
            <!—待付款  —>
            <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
                <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
                <view class="weui-gridlabel label">待付款</view>
            </view>
            <!—待发货  —>  
            <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
                <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
                <view class="weui-gridlabel label">待发货</view>
            </view>

            <!—已发货  —>
            <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
                <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
                <view class="weui-gridlabel label">待收货</view>
            </view>

            <!—已完成  —>
            <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
                <view class="weui-grid__label label">已完成</view>
            </view>
        </view>
    </view>
</view>

个人中心 js 代码

var app = getApp()var util = require('../../utils/util.js')
var formatLocation = util.formatLocation

Page({
    data: {
    },  // 指定 全部订单 和 九宫格中按钮 点击跳转至 选项卡中 与之对应的tab
    allForm:function(){
        app.globalData.currentLocation = 0,
        wx.navigateTo({ url: '../orderForm/orderForm' })
    },
    noPay:function(){
        app.globalData.currentLocation = 1,
        wx.navigateTo({ url: '../orderForm/orderForm' })
    },
    noSend:function(){
        app.globalData.currentLocation = 2,
        wx.navigateTo({ url: '../orderForm/orderForm' })
    },
    sended:function(){
        app.globalData.currentLocation = 3,
        wx.navigateTo({ url: '../orderForm/orderForm' })
    },
    completed:function(){
        app.globalData.currentLocation = 4,
        wx.navigateTo({ url: '../orderForm/orderForm' })
    }
})

个人中心 wxss 代码
样式根据自己的项目进行样式编写

全部订单 wxml 代码

<!—全部订单页  —>
<!—选项卡标题  —>
<scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待发货</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已发货</view>
    <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>
</scroll-view>

<!— 选项卡内容 —>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
<!— 全部订单 内容 —>
    <swiper-item>
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class="kong"></view>
            <!—写入显示内容  —>
            <view class="list" wx:for="{{carts}}" wx:key="this">
                <!— 图片 —>
                <view class="pic">
                    <image src="{{item.imgurl}}"></image>
                </view>
                <!— 类型表述 —>
                <view class="con">
                    <text class="type1">{{item.type1}}</text>
                    <text class="type2">{{item.type2}}</text>
                </view>
                <!— 价格 —>
                <view class="price">
                    <text class="price1">¥{{item.price}}</text>
                    <text class="number">×{{item.num}}</text>
                </view>
            </view>
        </scroll-view>
    </swiper-item>
    <!— 待付款 内容 —>
    <swiper-item>
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class="kong"></view>
            <!—写入显示内容  —>
            <!— 图片 —>
                <view class="pic">
                    <image src="{{item.imgurl}}"></image>
                </view>
                <!— 类型表述 —>
                <view class="con">
                    <text class="type1">{{item.type1}}</text>
                    <text class="type2">{{item.type2}}</text>
                </view>
                <!— 价格 —>
                <view class="price">
                    <text class="price1">¥{{item.price}}</text>
                    <text class="number">×{{item.num}}</text>
                </view>
            </view>
        </scroll-view>
    </swiper-item>  
    <!— 待发货 内容 —>
    <swiper-item>  
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class="kong"></view>
            <!—写入显示内容  —>

            <view class="list" wx:for="{{carts}}" wx:key="this">
                <!— 图片 —>
                <view class="pic">
                    <image src="{{item.imgurl}}"></image>
                </view>
                <!— 类型表述 —>
                <view class="con">
                    <text class="type1">{{item.type1}}</text>
                    <text class="type2">{{item.type2}}</text>
                </view>
                <!— 价格 —>
                <view class="price">
                    <text class="price1">¥{{item.price}}</text>
                    <text class="number">×{{item.num}}</text>
                </view>
            </view>
        </scroll-view>
    </swiper-item>  
    <!— 已发货 内容 —>
    <swiper-item>  
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class="kong"></view>
            <!—写入显示内容  —>
            <!— 图片 —>
            <view class="pic">
                <image src="{{item.imgurl}}"></image>
            </view>
            <!— 类型表述 —>
            <view class="con">
                <text class="type1">{{item.type1}}</text>
                <text class="type2">{{item.type2}}</text>
            </view>
            <!— 价格 —>
            <view class="price">
                <text class="price1">¥{{item.price}}</text>
                <text class="number">×{{item.num}}</text>
            </view>
        </scroll-view>
    </swiper-item> 
    <!— 已完成 内容 —>
    <swiper-item>
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class="kong"></view>
            <!—写入显示内容  —>
            <view class="list" wx:for="{{carts}}" wx:key="this">
                <!— 图片 —>
                <view class="pic">
                    <image src="{{item.imgurl}}"></image>
                </view>
                <!— 类型表述 —>
                <view class="con">
                    <text class="type1">{{item.type1}}</text>
                    <text class="type2">{{item.type2}}</text>
                </view>
                <!— 价格 —>
                <view class="price">
                    <text class="price1">¥{{item.price}}</text>
                    <text class="number">×{{item.num}}</text>
                </view>
            </view>
        </scroll-view>
    </swiper-item>

<!—全部订单 js 代码—>

// 全部订单页
//获取应用实例
var app = getApp()
Page({  /** 页面的初始数据 /
    data: {    // 选项卡
        winWidth: 0,
        winHeight: 0,// tab切换
        currentTab: 0,
        // 商品内容数据
        carts: [
            { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, 
            { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
            { imgurl: '../../img/fen-2.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
            { imgurl: '../../img/fen-1.jpg', type1: '【老酒特卖】45℃老白汾十年陈酿500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
        ],
    },
    /**  滑动切换tab  /
    bindChange: function (e) {
        var that = this;
        that.setData({ currentTab: e.detail.current });
    },
    /**  点击tab切换  /
    swichNav: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current
            })
        }
    },  
    /** 生命周期函数—监听页面加载/
    onLoad: function (options) {
        var that = this;    /**  获取系统信息  /
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    clientHeight: res.windowHeight
                });
            }
        });
    },
    /** 生命周期函数—监听页面显示*/
    onShow: function () {
        if (app.globalData.currentLocation == '') {
            this.setData({
                currentTab: 0
            });
        } else {
            var i = app.globalData.currentLocation;
            this.setData({
                currentTab: i
            });
        }
    }
})

全部订单 wxss 代码样式根据自己的项目进行样式编写

评论专区