小程序选项卡以及swiper套用（跨页面）

选项卡tab和swpier之间的套用，供大家参考，具体内容如下

其实我之前写过一篇选项卡的切换demo，大家阔以参考一下 小程序多个选项卡切换
那今天写这个demo呢，是因为项目需求，所以仅供参考。

首先，我是拿到了home.wxml的数组下标，通过url传参的方式去将这个数组id传到下一个页面，下一个页面接收以后再将id赋值给对应的tab或者currentId（swiper 的下标）
实现上一个页面进来以后直接进入对应的页面。

首先看一下效果图吧

当我点击违章查询

跳转到对应的页面展示对应的内容

那么上菜！！！

home.wxml

<view class='wrpg'>
 <view class='wrpg-bottom'>
 <view class='myOrder'>
 <view class='myTips'>
 <text>我的订单</text>
 </view>
 <view class='allOrder' >
 <view class='item-Order' wx:for="{{allOrder}}" wx:key='' >
 <view class='washcar' bindtap='toOrder' data-index='{{index}}' data-id='{{item.id}}'>
  <image class='washcarImg' src="{{item.washcar}}" ></image>
  <text class='tips'>{{item.tips}}</text>
 </view>
 </view>
 </view>
 </view>
 </view>
</view>

home.wxss

.wrpg {
 width: 90%;
 height: 100%;
 margin: 0 auto;
}
.myOrder {
 margin: 20rpx auto;
 width: 100%;
 height: 260rpx;
 background: #fff;
 border-radius: 10rpx;
}

.myTips {
 font-size: 30rpx;
 font-weight: bold;
 margin: 10rpx;
}

.allOrder {
 width: 100%;
 height: 150rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}

.item-Order {
 width: 100%;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}

.washcar {
 width: 100rpx;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
/* 保持行级 */
 flex-flow: column nowrap;
 font-size: 25rpx;
}

.washcarImg {
 width: 45rpx;
 height: 45rpx;
}

.tips {
 margin-top: 10rpx;
}

home.js

数组写在data里

allOrder: [{
 id:0,//这里就是你需要的传递数组的id
 washcar: "images/water.png",
 tips: "洗车"
 },
 {
 id:1,
 washcar: "images/bank.png",
 tips: "违章查询"
 },
 {
 id: 2,
 washcar: "images/money.png",
 tips: "商场订单"
 },
 {
 id: 3,
 washcar: "images/peo.png",
 tips: "会员"
 },
 ],
//事件处理函数，通过url传参

 toOrder(e){

 var id = e.currentTarget.dataset.id;
 console.log(id);
 wx.navigateTo({
 url: 'order/order?id='+id,
 })
 },

OK！上一个页面传递成功，那么接下来就是接收了

order.wxml

<view class='wrpg'>
 <view class='wrpg-top'>
 <view class="content-titles">
 <view class='washcar {{index==indexNum?"active":""}}' wx:for="{{washcar}}" data-index='{{index}}' wx:key="" bindtap='tabChange'>
 <text>{{item.tips}}</text>
 </view>
 </view>
 </view>
 <view class='wrpg-content'>
 <swiper vertical="{{false}}" current='{{indexNum}}' bindchange='Change'>
 <!-- 第一屏 -->
 <swiper-item>
 <view class=''>washcar</view>
 </swiper-item>
 <!-- 第二屏 -->
 <swiper-item>
 <view class="select-content-titles">
  <view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{selecttab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'>
  <text>{{item.tips}}</text>
  </view>
 </view>
 <view wx:if='{{idx == 0}}' class='tab1' data-id='0'>
  <image class='tab1Img' src="../images/order.png"></image>
  <text>你暂时还没有违章查询~</text>
 </view>
 <view wx:if='{{idx == 1}}' class='tab2' data-id='1'>222</view>
 <view wx:if='{{idx == 2}}' class='tab3' data-id='2'>333</view>
 <view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view>
 </swiper-item>
 <!-- 第三屏 -->
 <swiper-item>
 <view class="select-content-titles">
  <view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{ordertab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'>
  <text>{{item.tips}}</text>
  </view>
 </view>
 <view wx:if='{{idx == 0}}' class='tab1' data-id='0'>
 000
 </view>
 <view wx:if='{{idx == 1}}' class='tab2' data-id='1'>
 <image class='tab1Img' src="../images/order.png"></image>
  <text>你暂时还没有商品~</text>
  <text class='buyMore'>去逛逛~</text>
 </view>
 <view wx:if='{{idx == 2}}' class='tab3' data-id='2'>

  <image class='orderDetailImg' src="../images/orderDetail.png"></image>
 </view>
 <view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view>
 </swiper-item>
 <!-- 第四屏 -->
 <swiper-item>
 <view class=''>vip</view>
 </swiper-item>
 </swiper>

 </view>
</view>

order.wxss

/* pages/home/order/order.wxss */

page {
 width: 100%;
 height: 100%;
 background: rgb(244, 246, 250);
}

.wrpg-top {
 width: 100%;
 height: 80rpx;
 background: #fff;
}

.content-titles {
 display: flex;
 justify-content: center;
 align-items: center;
}

.washcar {
 width: 200rpx;
 height: 100rpx;

 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 10rpx;
 font-size: 30rpx;

}

.active {
 font-size: 40rpx;
 font-weight: bold;
}

swiper{
 width:100%;
 height: 1100rpx;

}
.select-content-titles{
width: 100%;
height: 80rpx;
background: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}
.selectContent{
 width: 200rpx;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-left: 10rpx;
 font-size: 25rpx;
}
.type-item-on {
border-bottom: 4rpx solid rgb(95, 162, 238);
color: rgb(95, 162, 238);
}
.tab1,.tab2{
width: 100%;
height: 100%;

 display: flex;
 justify-content: center;
 align-items: center;
 flex-flow: column;
 font-size: 30rpx;
}
.tab1Img{
 width: 100rpx;
 height: 100rpx;
}
.buyMore{
 color: rgb(95, 162, 238);
}
.orderDetailImg{
width: 100%;
height: 600rpx;
margin: 10rpx;
}

1.接下来就是需要在在order.js接收上一个页面home的数组id：

onload事件里刷新order.wxml的选项卡数组下标，
这样就是从上一个页面子元素进入本页面的对应子元素。

但是

我的这里拿到这个homeid以后没有直接赋值给我的washcar数组的id。
我是赋值给了我的swiper的下标indexNum。
因为我的swiper 和导航的选项卡数组下标做了联动，我只需要改其中之一就能实现。所以我就取巧了，不建议这样做，只是我刚好有罢了

2.在swiper里，利用swiper组件的属性 current拿到对应的滑块的下标，将滑块的下标赋值给我的order.wxml的选项卡数组下标，就可以实现滑动的同时，刷新tab对应的选项样式。

// pages/home/order/order.js

Page({

 /**
 * 页面的初始数据
 */
 data: {
 idx: 0, //默认选中第一项
 indexNum: 0,
 washcar: [{
 tips: "洗车"
 },
 {
 tips: "违章查询"
 },
 {
 tips: "商城订单"
 },
 {
 tips: "会员"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "处理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤销"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 ordertab: [{
 id: 0,
 tips: "全部"
 },
 {
 id: 1,
 tips: "待付款"
 },
 {
 id: 2,
 tips: "待收货"
 },
 {
 id: 3,
 tips: "待评价"
 },
 ],
 },
//导航栏点击事件
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //选项卡滑动
 Change(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查询违章选项卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,
 })

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum:id
 })
 },

一开始我想点击事件和滑动事件都共用一个滑动事件，通过判断来控制下标，但bindtap和滑动里的bindchange事件,根本就是两个事件，无法再一个事件里实现，我一直纠结在使用一个事件来实现，导致一直卡壳。想复杂了

其实我是一个前端小白，从后台转过了也才没有多久，希望有不对可以指正。广泛交友。共同成长

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2020-06-18

微信小程序实现顶部普通选项卡效果(非swiper)

背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来. 效果图: 下面直接上代码: wxml: <view class="navbar"> <text wx:for="{{navbar}}" data-index="{{index}}" class="item {{currentIndex==index?'active':''}}" bindtap="navbarTab"

微信小程序实现顶部选项卡(swiper)

微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下. 效果图: 下面直接上代码: wxml: <!--pages/index/index.wxml--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"&

微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

微信小程序的tab选项卡的实现效果

效果图,既可以点击切换,又可以滑动切换 .wxml <!--pages/detail/detail.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view> &

微信小程序实现顶部导航特效

本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下 之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图 上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===

微信小程序 配置顶部导航条标题颜色的实现方法

微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下 效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=

微信小程序实现一个简单swiper代码实例

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha

微信小程序 轮播图swiper详解及实例（源码下载）

微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

微信小程序视图容器（swiper）组件创建轮播图

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

详解微信小程序回到顶部的两种方式

在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现 一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> CSS: /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fix