微信小程序实现 TabLayout 并带有过渡效果

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中：

样式文件 indexwxss 中

布局文件 indexwxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题：

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后，发现自定义属性 item 获取值为 null

出现该种情况，应在 thissetData ( ) 之后，执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息

注意：

直接修改 thisdata 而不调用 thissetData 是无法改变页面的状态的，还会造成数据不一致

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

方法如下：

js:

Page({  data: {

   text: 'init data',

   num: 0,

   array: [{text: 'init data'}],    object: {

     text: 'init data'

   }

 },

 changeText: function() {    // thisdatatext = 'changed data'  // bad, it can not work

   thissetData({

     text: 'changed data'

   })

 },

 changeNum: function() {    thisdatanum = 1

   thissetData({

     num: thisdatanum

   })

 },

 changeItemInArray: function() {    // you can use this way to modify a danamic data path

   thissetData({      'array[0]text':'changed data'

   })

 },

 changeItemInObject: function(){    thissetData({      'objecttext': 'changed data'

   });

 },

 addNewField: function() {    thissetData({      'newFieldtext': 'new data'

   })

 }

})

wxml:

<view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeNum"> Change normal num </button><view>{{array[0]text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{objecttext}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newFieldtext}}</view><button bindtap="addNewField"> Add new data </button>

小程序使用wx:for指令进行DOM循环时，默认当前循环的元素为 item，这样在双层循环中内层就不能通过 item 获取外层的数据。但是可以通过在内层循环中添加 wx:for-item = "{{ curr }}" 来重新定义当前循环的数据，这样就可以通过 item 获取到外层的数据

<view>父组件msg的值:{{msg}}</view>

<Header msg="{{msg}}" bindchildChange="change" ></Header>

<block wx:for="{{list}}" wx:key="index">

<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>

</block>

<Header  msg="{{msg}}"></Header>

/ pages/list/listwxss /

item{

    padding: 5px;

}

img1{

    width: 120px;

    height: 120px;

    border-radius: 5px;

}

row{

    flex: 1;

    height: 120px;

}

title{

    padding: 10px;

}

dec{

    padding:0 10px;

}

// pages/list/listjs

Page({

    /

      页面的初始数据

     /

    data: {

        msg:"你是我的小宝贝",

     list:[{

         url:">

方法/步骤

在小程序中为了实现一个中添加多个内容重复的标签，那就需要使用循环。如果按小程序的简易教程，循环加在中，而放在里面。所有数据都会遍历到每一个中。这不是我们想要的。

在微信小程序中有个属性,是指当点击列表元素时当按下鼠标左键会显示样式,但是鼠标离开样式就会复原

核心点：模板文件中使用三元运算符,通过dateCurrent指定当前item的id。

在组件上使用控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例。

接着用在标签上，以渲染一个包含多节点的结构块。

接着只需要把放入文件中就可以，把循环数据绑定到上就可以了。

在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签，那就需要使用wx:for循环。如果按小程序的简易教程，循环加在block中，而swiper-item放在里面。所有数据都会遍历到每一个swiper-item中。这不是我们想要的。

只需要把<block>放入<swiper-item>中就可以，把循环数据绑定到block上就可以了。

代码：

<!--导航部分轮播图--><swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}"> <swiper-item> <block wx:for="{{navimg}}"> <view class="navbox"> <image class="navimg" src="{{item}}"></image> <text class="navtext">掌上信息</text> </view> </block> </swiper-item> </swiper>

可以通过在 uni-table 组件上绑定 v-for 来实现不同行的颜色变化。

步骤如下：

1定义 data 属性，其中 colorArr 存放的是颜色字段：

data () {

return {

list: [],

colorArr: ['#f00', '#0f0', '#00f', '#fff']

}

},

2在 uni-table 组件上绑定 v-for

<uni-table-column v-for="(item, index) in rowlist"

:key="index"

:type="itemtype"

:label="itemlabel"

:width="itemwidth"

:align="itemalign"

:show-overflow-tooltip="itemshowOverflowTooltip"

:class="['cell-type-'+itemtype, {'bg-light': rowtype=='light'}]"

:style="{backgroundColor: colorArr[index]}"

>

{{ itemvalue }}

</uni-table-column>

上述代码在 uni-table 组件上绑定 v-for 来循环 list，在 uni-table-column 标签上传递行索引index 即可动态改变单元格的背景颜色。另外，也可以给 uni-table-column 标签设置其他的样式。

以上就是关于微信小程序实现 TabLayout 并带有过渡效果全部的内容，包括:微信小程序实现 TabLayout 并带有过渡效果、小程序 swipe-item标签携带的data-数据怎么通过change事件获取、wx:for 内部循环中如何获取外层循环的 item（当前循环元素）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！