小程序选项卡以及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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
node+vue实现文件上传功能
May 28 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通用防注入程序 推荐
2011/02/26 PHP
php实现webservice实例
2014/11/06 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue中的scope使用详解
2017/10/29 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python-for循环的内部机制
2020/06/12 Python
人间正道是沧桑观后感
2015/06/15 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书