微信小程序---tabBar&页面跳转

微信小程序---tabBar&页面跳转,第1张

1、tabBar

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

(1)tabBar相关属性

color:tab上的文字默认颜色,仅支持十六进制颜色。

selectedColor:tab上的文字选中时的颜色,仅支持十六进制颜色。

backgroundColor:tab的背景色,仅支持十六进制颜色。

borderStyle:tabbar上边框的颜色, 仅支持 black / white。

position:tabBar的位置,默认值是: bottom,仅支持 bottom / top。当 position 为 top 时,不显示 icon。

custom:自定义tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

(2)list

list:tab的列表。

list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。

pagePath:页面路径,必须在pages 中先定义。

text:tab 上按钮文字。

iconPath:图片神衡路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、页面跳转

(1)跳转普通页面

方法① navigator组件

 <!-- 跳转到普通页,可以通过返回按钮返回 -->

 <navigator url="../detail/detail">到详情页</navigator>

方法② navigateTo()方法

navigateTo()方法,用于跳转普通页面。

<view bindtap="gotoDetail">到详情页</view>

gotoDetail(){

    //使用全局api跳转,navigateTo()方法,用于跳转普通页面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

(2)跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面,需要设置open-type="switchTab"。

 <!-- 跳转到tabBar页面,不可以通过返回按钮返回。因为跳转到指定的tabBar页面后,会关闭其他所有页面 -->

<navigator url="../list/list" open-type="switchTab">到列表页</navigator>                                        袭猛                        拍瞎桥                      

方法② switchTab()方法

switchTab()方法,用于跳转tabBar页面。

  <view bindtap="gotoList">到列表页</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }

微信小程序Swiper做Tab切换,带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换,但是有Swiper组件,其实我们也可以做滑动切换

监听Swiper的bindchange,我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的,体验不是很好。于是就有了这个demo,我们一步步优化切换体验。

首先:利用flex布局,做出tab区域,如果tab选项卡很多可以使用Scroll-view;一般的跳转式的tab用boder-bottom实现就好,这里我们加了一个“navbar-slider”,加上translateX动画实现平移切换。

然后:计算出每个tabItem的宽度,和每个item距离0坐标的距离;下中50是slider的宽度,对应上面“width:50px”

关联:1、监听item点击,切换swiper;2、监听swiper切换改变slider位置和tab显示

效果展示如下:

现在我们已经实现了,Swiper和tab的带动画联动,但是我们可以发现,我们的切换动画是在切换之后郑旦贺进行的,我们这里还可以继续优化。

swiper在切换时可以监听bindtransition,swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},dx则是平移的偏移量,我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置,这喊派里我们不能使用bindchange来校正,因为bindchange在切换时手指释放的时候就调用了,我们这里使用bindanimationfinish回调来校正(动画结束时会触发 animationfinish 事件,event.detail 同上)

最终:展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData,我们最后这种方式就会频繁的调用,所以这里其实只是提供这种思路,但是工程中并不迟告建议这么使用

小程序开发者文档

SwiperTab

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。即wx:for指令用于循环数组数据,生成组件。

循环出来的每一项通过item返回,每一项对应的索引,通过index返回。

wx:key="",设置每一项唯一的标识。循环列表时,添加wx:key的好处是,将来列表发生变化时重新渲染列表的损耗为更低。

使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名:

条件渲染可以使用 wx:if 或 hidden 。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好;如果在运行时条件不大可能改变,则 wx:if 较好。

wx:if用于条件渲染:条件为真生成里面的内容,条件为假不会生成里面的内容。扮祥(每次重新生成内容)

也可以用 wx:elif 和 wx:else 来添加一个 else 块。

hidden用于条件渲染:条件为真隐藏里面的内容,条件为假显示里面的内容。(每次切换样式)

在app.json文闹纯件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

color: tab上的文字默认颜色,仅支持十六进制颜色。

selectedColor: tab上的文字选中时的颜色,仅支持十六进制颜色。

backgroundColor: tab的背景色,仅支持十六进制颜色。

borderStyle: tabbar上边框的颜色, 仅支持 black / white。

position: tabBar的位置,默认值是: bottom,仅支持 bottom / top。当 position 为 top 时,不显示 icon。

custom: 自定义tabBar。

list是一个数组,它定义了tab的列表。只能配置最少2个、最多5个tab。

pagePath: 页面路径,必须在 pages 中先定义。

text: tab 上按钮文字。

iconPath: 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

selectedIconPath: 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

跳转到普通页,可以直接通过返回按钮返回。

navigateTo()方法,用于跳转普通页面。可以直接通过返回按钮返回。

页液缺咐面js文件中添加方法:

redirectTo()方法,关闭当前页面再跳转到指定页,不能通过返回按钮返回页面。该方法不能用于跳转tabBar页面。

页面js文件中添加方法:

跳转到tabBar页面,通过tabBar按钮返回。

如果要使用navigator组件跳转tabBar页面,需要设置open-type="switchTab"。

switchTab()方法,用于跳转tabBar页面。

页面js文件中添加方法:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12292988.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存