选项卡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="/UploadFiles/2021-04-02/{{item.washcar}}">
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"htmlcode">
<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="/UploadFiles/2021-04-02/order.png">
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选项卡操作方法汇总
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
小程序,选项卡,swiper
明霞山资源网 Design By www.htccd.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。