用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

类似tabBar的切换页面效果(微信小程序)

纸飞机 2018-3-8 09:39

需求分析微信开发,经常遇到类似tabBar的页面切换效果:视图中有标题和页面,当点击一个标题时,该标题呈选中状态,页面自动切换;当滑动页面时,标题自动切换。实现逻辑这种效果的实现逻辑是:定义变量selectedTitl ...

需求分析

微信开发,经常遇到类似tabBar的页面切换效果:视图中有标题和页面,当点击一个标题时,该标题呈选中状态,页面自动切换;当滑动页面时,标题自动切换。

实现逻辑

这种效果的实现逻辑是:定义变量selectedTitle、标题的id,当id和selectedTitle相等时,定义样式title-selected。当点击一个标题时,将该标题的id赋值给selectedTitle,该标题获得样式title-selected,呈现选中状态。页面使用swiper组件,将current属性与selectedTitle绑定,可以实现页面自动切换。将current赋值给selectedTitle,当滑动页面时,标题将自动切换。

项目源码

页面切换-横向的代码如下。

1、JS文件

  1. data: {
  2. // 定义标题的数组
  3. titles: ["Yellow", "Orange", "Green", "Blue", "Purple"],
  4. // 定义选中标题的初始值0
  5. selectedTitle: "0",
  6. },
  7. // 定义点击标题的事件处理函数,将选中标题的id赋值给selectedTitle
  8. bindtap: function (e) {
  9. console.log(e)
  10. this.setData({
  11. selectedTitle: e.currentTarget.id
  12. });
  13. },
  14. //定义滑块改变的事件处理函数,将current赋值给selectedTitle
  15. bindChange: function (e) {
  16. this.setData({
  17. selectedTitle: e.detail.current
  18. })
  19. },
  20. onReady: function () {
  21. // 页面渲染完成
  22. var that = this;
  23. wx.getSystemInfo({
  24. success: function (res) {
  25. that.setData({
  26. swiperHeight: (res.windowHeight - 37)
  27. });
  28. }
  29. })
  30. }

2、WXML文件

  1. class="titles">
  2. wx:for="{{titles}}">
  3. id="{{index}}" bindtap="bindtap" class="title {{index==selectedTitle ? 'title-selected' : ''}}">
  4. {{item}}
  5. bindchange="bindChange" current='{{selectedTitle}}' style="height:{{swiperHeight}}px">
  6. wx:for="{{titles}}">
  7. class='page bc_{{item}}'>{{item}}

3、WXSS文件

  1. .titles {
  2. height: 36px;
  3. width: 750rpx;
  4. background-color: lightgray;
  5. display: flex;
  6. justify-content: space-around;
  7. }
  8. .title {
  9. width: 180rpx;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. }
  14. .title-selected {
  15. border-bottom: 2px solid red;
  16. color: red;
  17. }
  18. .page {
  19. width: 100%;
  20. height: 100%;
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. font-size: 90rpx;
  25. color: white;
  26. }
  27. .bc_Yellow {
  28. background-color: yellow;
  29. }
  30. .bc_Orange {
  31. background-color: orange;
  32. }
  33. .bc_Green {
  34. background-color: green;
  35. }
  36. .bc_Blue {
  37. background-color: blue;
  38. }
  39. .bc_Purple {
  40. background-color: purple;
  41. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏