选项卡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.vgjia.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]