微信小程序之选项卡的实现方法

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。

先看效果图：

实现代码：

页面代码：


1

2

3

4

5

6

7

8

9

10

11

<view class="swiper-tab">

  <view class="swiper-tab-item {{currentTab==0?‘active‘:‘‘}}" data-current="0" bindtap="clickTab">一</view>

  <view class="swiper-tab-item {{currentTab==1?‘active‘:‘‘}}" data-current="1" bindtap="clickTab">二</view>

  <view class="swiper-tab-item {{currentTab==2?‘active‘:‘‘}}" data-current="2" bindtap="clickTab">三</view>

</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">

  <swiper-item><view>第一屏</view></swiper-item>

  <swiper-item><view>第二屏</view></swiper-item>

  <swiper-item><view>第三屏</view></swiper-item>

</swiper>

js代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

var app=getApp()

Page({

 data:{

  currentTab:0

 },

 onLoad:function(options){

  // 页面初始化 options为页面跳转所带来的参数

 },

 //滑动切换

 swiperTab:function( e ){

  var that=this;

  that.setData({

   currentTba:e.detail.current

  });

 },

 //点击切换

 clickTab: function( e ) {

  var that = this;

  if( this.data.currentTab === e.target.dataset.current ) {

   return false;

  } else {

   that.setData( {

    currentTab: e.target.dataset.current

   })

  }

 }

})

css代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.swiper-tab{

  width: 100%;

  border-bottom: 2rpx solid #ccc;

  text-align: center;

  height: 88rpx;

  line-height: 88rpx;

  font-weight: bold;

}

.swiper-tab-item{

  display: inline-block;

  width: 33.33%;

  color:red;

}

.active{

  color:aqua;

  border-bottom: 4rpx solid red;

}

原文地址：https://www.cnblogs.com/ybaby/p/8320126.html

时间： 2024-11-04 22:55:28

微信小程序之选项卡的实现方法的相关文章

微信小程序传值以及获取值方法

微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要传递的值 微信小程序设置id的方法标识来传值 在要跳转的item处,设置一个id并给当前的id赋值上对应的key值,比如一部电影的id(后面带着id去下一个页面查询,详细信息)如: 后我们在js的bindtap的响应事件中获取,并传递到下一个界面中: 获取到id传的值 通过e.currentTarget.id;获取设置的id值,并通过

【微信小程序】引入外部js 方法

微信小程序引入外部js 方法 步骤: 1.首先将外部js放在你指定的文件夹里  如:utils/fecth.js 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js ,并使用暴露出来的方法 步骤1:使用utils文件夹下的 fetch.js 方法 步骤2:将我要使用的方法用 module.exports 给暴露出来 下面是一个网络请求的js方法: module.exports = (url, data) => { return new Promise((reso

微信小程序request（promise）方法封装

var Promise = require('es6-promise'); var app = getApp(); function wxPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { //成功 resolve(res) } obj.fail = function (res) { //失败 reject(res

微信小程序的wx.request请求方法，标准写法

wx.request({ url: 'https://127.0.0.1:8443/user/testRSA',//请求路径 data:{ column: output //请求数据 }, header:{ 'content-type':"application/json", //请求头 }, method:"POST", //请求方法 dataType:"json",//请求类型 success(data){ //请求成功的参数 console

微信小程序 原生框架 （分享方法封装）

封装的分享方法 1 function share(o,isDebug = false ) { 2 //路径 3 let url = o.url || getCurrentPages()[getCurrentPages().length - 1].route; 4 5 //当前路径所带参数 6 let urlParams = getCurrentPages()[getCurrentPages().length - 1].options; 7 8 isDebug&&console.log(`当

微信小程序使用字体图标的方法

一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://transfonter.org/,把刚才下载的ttf字体文件转化成base64格式 原文:http://www.soswen.com/article/10 三.下载下来之后解压找到stylesheet.css ,打开文件,复制这些内容到wxss里: 四.打开之前在阿里巴巴下载的压缩包,找到iconfont.

干货|微信小程序线上线下推广的方法和销售话术小技巧分享

一款小程序在被开发后,若想获得广泛的用户群体,就得靠一些巧妙地话术宣传和推广措施.那么问题来了,微信小程序推广和话术有哪些呢?具体要怎么操作?别着急,请听小编来跟大家一一道来. 小程序推销话术小技巧 1.有自信,说话有底气 销售人员在宣传小程序时,一定在客户面前要很自信地说话.不自信的话是缺乏说服力量的.有了自信以后,销售人员在讲话的尾语可以作清楚的.强劲的结束,由此给对方确实的信息.如"一定可以使您满意的".这样的话会让客户对你宣传的小程序产生一定的信心. 2.重复重要语句,加深在顾

微信小程序入门与实战/常用组件/API/开发技巧/项目实战 共11章

实战开发电影资讯微信小程序 学习之前需要掌握JavaScript和CSS基础 ----------------课程目录---------------- 第1章:什么是微信小程序 开篇及课程特色介绍 直观感受一下微信小程序 小程序适合做什么样的应用 对开发者的影响 学习基础 小作业 第2章:环境搭建与开发工具 开篇介绍及下载工具 小程序目前情况及限制 小程序开发工具介绍 第3章:开始小程序之旅 本章内容简介 官方种子项目介绍与小程序的文件结构 新建我们自己的项目:ReaderMovie 开始制作项

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩