微信小程序---tab选项卡组件

微信小程序—tab选项卡组件

在components组件中新建tab文件夹。（组件可自定义样式）

components/Tab/tab.wxml

<!--components/Tab/tab.wxml-->
<!-- 自定义tab标签组件-->
<scroll-view scroll-x="true" class="scroll-view-x" wx:if="{{!ttype || ttype==2}}"><view class="scroll-view-item" wx:for="{{tList}}" wx:key="*this"><!-- class="{{currentTab==(index) ? 'on' : ''}}" --><view style="{{currentTab==(index) ?styleActive:styleOld}}" bindtap="_swichNav" data-current="{{index}}">{{ !tname ? item.name : item[tname].name }}</view></view>
</scroll-view>
<!--内容列表-->
<slot>
</slot>

** components/Tab/tab.js**

// components/Tab/tab.js
//组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
Component({properties: {//标题列表tList: {type: Array,value: []},//当前tab indexcurrentTab: {type: Number,value: 0,observer: function (newVal, oldVal) {this.setData({currentTab: newVal})}},styleActive: {//选中激活的样式type: String,value: 'color:#603F25;border-bottom: 5rpx solid #603F25;',},styleOld: {//默认的样式type: String,value: 'color:#BCA796;',},},//组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用methods: {// 内部方法建议以下划线开头_swichNav: function (e) {//自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项this.triggerEvent('changeCurrent', {currentNum: e.currentTarget.dataset.current})}}
})

tab.css

.scroll-view-x{white-space: nowrap;z-index:10;font-size: 32rpx;}.scroll-view-x .scroll-view-item{display:inline-block;margin:0 35rpx;line-height: 33px;cursor: pointer;}.on{}

在pages文件中引用
html中

<view class="boxBig bgz bgt" style="height: {{screenHeight}}px;"><view class="wid100 paddL20 paddR20 boxSing"><slideTab tList="{{statusType}}" bind:changeCurrent="swichNav" currentTab="{{currentType}}"><swiper current="{{currentType}}" duration="300" bindchange="bindChange" style="height: {{screenHeight-35}}px;margin-top:35px;"><block><!--tab数据二维数组--><swiper-item  wx:for="{{listInfo}}" wx:key="index" ><!--tab下面的对应列表内--><view class="hetd bgSet marB30 flexz paddB40 paddT40 paddL30 paddR30 boxSing" style="background-image: url('{{imgz1}}');"  wx:for="{{item}}" wx:key="childIndex" wx:for-item="childItem"><image class="img200 boRadius20 marL30" src="{{childItem.img}}" mode="aspectFill"></image><view class="wid60 marL20 lineHei40 mar"><view class="fontz28 fontWeightB">{{childItem.title}}</view><view class="fontz24 color7D644D  ellipsis2">{{childItem.desc}}</view><view class="flexz"><view class="fontz32 color6A3906 fontWeightB wid60 marT10">￥99</view><view class="anniusm" bindtap="goDet" data-id="{{item.id}}" bindtap="goDet">详情</view></view></view></view></swiper-item></block></swiper></slideTab></view>
</view>

js文件

data: { statusType: [{ name: "全部", page: 0 },{ name: "待发货", page: 0 },{ name: "待收货", page: 0 },{ name: "已完成", page: 0 }],currentType: 0,listInfo: [[{ id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }],[{ id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }, { id: 1, img: '/images/img.png', title: '蓝鳍：Blue Fin 美式海鲜纽约海港西餐厅', desc: '内容简介内容简介内容简介内容简介内容简介内容简介' }], [], [], []], },// 点击tab切换 swichNav: function (res) {if (this.data.currentType == res.detail.currentNum) return;this.setData({currentType: res.detail.currentNum})},bindChange: function (e) {this.setData({currentType: e.detail.current})if (!this.data.list[e.detail.current].length)this.getList();},

微信小程序---tab选项卡组件相关推荐

微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序tab选项卡，点击弹窗（带蒙版）五星好评-获取微信手机号码
 <view class="swiper-tab"><view cl ...
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
微信小程序 tab选项卡，可点击，可滑动
看下效果图: <view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0 ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...

微信小程序---tab选项卡组件

微信小程序—tab选项卡组件

微信小程序---tab选项卡组件相关推荐

最新文章

热门文章