小程序选项卡以及swiper套用(跨页面)


Posted in Javascript onJune 19, 2020

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

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

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

首先看一下效果图吧

小程序选项卡以及swiper套用(跨页面)

当我点击违章查询

小程序选项卡以及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选项卡操作方法汇总

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
javascript测试题练习代码
Oct 10 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python中cPickle用法例子分享
2014/01/03 Python
python 容器总结整理
2017/04/04 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
出生公证委托书
2014/04/03 职场文书
初级党校心得体会
2014/09/11 职场文书
西双版纳导游词
2015/02/03 职场文书
稽核岗位职责范本
2015/04/13 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS