微信小程序实现 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 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

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

效果好不好，取决于你的小程序所开发的功能是否贴合营销实际，小程序现在有很多类型，其中就要电商类，当然还有餐饮、美容、酒店、医疗、商超等类型；在小程序里面你可以提供产品或者服务，消费者可以在你的 小程序进行在线下单、在线支付，然后你提供配送服务寄送到消费者手中即可，当然这也是简单的功能，还会有较为复杂的功能。

微信小程序是适合做电商的，因为电商小程序有以下优势：

1、 获客成本低

现在的APP获取一个用户至少几十块，而小程序背靠微信1084亿海量用户，用户在哪里，入口流量就在哪里。

2、 强大的社交性

微信的主体是社交，在这种情况下，小程序的社交电商方式也是应运而生。现在，在人们的眼中，商品的口碑越来越重要。而用户在通过社交，进行商品的交流分享的同时，电商小程序的流量也就在不断的上升。

3、 巨大的流量入口

小程序的流量入口有60多个，微信聊天页面的下拉菜单、聊天页面的小程序分享卡片、附近的小程序……多种渠道全方位地获取客户资源。

4、 完整的在线交易系统

顾客进入小程序，可以按照分类精确的搜索自己想要购买的商品，加入购物车，并一起结算付款；也可收藏商品，记录浏览足迹，查看订单详情。

5、 丰富的营销工具

商家可后台 *** 作发布优惠券、秒杀、限时抢购等多种营销活动工具，吸引顾客消费；拼团、一键转发生成商品截图等功能引导顾客自发传播，扩大推广面；二级分销模式，快速增加曝光量。

6、 便捷的会员积分管理

会员可签到获得积分，在消费时积分抵扣一定数量金额。

7、 智慧的后台数据反馈

商家通过小程序后台轻松获得顾客基础资料，管理积分等；可将客户进行分组，使用活动分组推送功能，精准营销。

往左边滑动出现删除按钮， 只对当前滑动的对象 *** 作

<view class="shop-list">

    <view class="check-all-box" bindtap="onCheckAll">

      <view>

        <label class="check-around8"  bindtap="selected" data-lor='1'>

          <radio checked="{{allSelectedtrue:false}}" color="#000"></radio>

          <text class="check-all">{{checkAllText}}全选</text>

        </label> 

      </view>

    </view>

    <view class="item-box  {{itemisTouchMove 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{list}}" wx:key="{{index}}">

      <view class="item">

        <view class="check-around-box" data-id="{{itemid}}" >

            <label bindtap="selected" data-id="{{itemid}}" data-isSelect="{{itemisSelect}}">

              <radio checked="{{itemisSelect>0true:false}}" color="#000"></radio>

            </label>   

          </view>

        <view class="item-img-box">

          <image class="item-img" src="{{itemthumbUrl}}" />

        </view>

        <view class="item-info-box">

          <text class="item-title">{{itemtitle}}</text>

          <text class="item-spec">{{itemspec}}</text>

          <text class="item-price">¥{{itemprice}}</text>

          <view class="num-box">

            <view class="num-desc" data-id="{{itemid}}" data-total="{{itemtotal}}" bindtap="reduce">-</view>

            <input class="item-input" type="number"disabled="boolean" value="{{itemtotal}}" />

            <view class="num-plus" data-id="{{itemid}}" data-total="{{itemtotal}}" bindtap="plus">+</view>

          </view>

        </view>

      </view>

      <view class="remove" data-id="{{itemid}}" bindtap="remove">{{remove}}删除</view>

    </view>

  </view>

page{

  background-color: #f8f8f8;

}

shop-list {

  display: flex;

  flex-direction: column;

  margin-top: 30rpx;

  padding-bottom:120rpx;

}

check-all-box {

  display: flex;

  align-items: center;

  padding: 30rpx;

  background-color: #fff;

}

check-all-box  check-all {

  margin-left: 20rpx;

  font-size: 30rpx;

}

check-around {

  width: 35rpx;

  height: 35rpx;

  margin-right:20rpx;

  border-radius: 50rpx;

  border: 1rpx solid #f8f8f8;

}

check-active {

  width: 35rpx;

  height: 35rpx;

  border-radius: 50rpx;

  background-color: #999999;

}

item-box {

  margin-bottom: 20rpx;

  position: relative;

  z-index: 99;

  font-size: 14px;

  display: flex;

  justify-content: space-between;

  border-bottom:1px solid #ccc;

  width: 100%;

  overflow: hidden

}

item {

  display: flex;

  align-items: center;

  padding: 30rpx;

  background-color: #fff;

  position: relative;

  z-index: 99;

  width: 100%;

  margin-right:0;

  -webkit-transition: all 04s;

  transition: all 04s;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  margin-left: -90px

}

item item-img {

  width: 180rpx;

  height: 180rpx;

  border-radius: 5rpx;

  border: 1rpx solid #eaeaea;

}

item item-info-box {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 420rpx;

  height: 180rpx;

  margin-left:20rpx;

}

item-info-box item-title {

  font-size: 30rpx;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

  word-break: break-all;

}

item-info-box item-spec {

  color: #676767;

  margin-top: 15rpx;

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

}

item-info-box item-price {

  display: flex;

  margin-top: 15rpx;

}

item-info-box num-box {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  font-size: 30rpx;

}

num-box num-desc {

  padding: 0 10rpx;

  color: #999;

  border: 4rpx solid #999;

}

num-box item-input {

  width: 80rpx;

}

item-input {

  text-align: center;

}

num-box num-plus {

  padding: 0 10rpx;

  color: #fff;

  background-color: #000;

  border: 4rpx solid #000;

}

remove {

  background-color: orangered;

  width: 90px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  -webkit-transform: translateX(90px);

  transform: translateX(90px);

  -webkit-transition: all 04s;

  transition: all 04s;

}

touch-move-active item,

touch-move-active remove {

  -webkit-transform: translateX(0);

  transform: translateX(0);

}

var app = getApp()

Page({

  data: {

    list: [

      {

        id: '1',

        thumbUrl: '>

以上就是关于微信小程序实现 TabLayout 并带有过渡效果全部的内容，包括:微信小程序实现 TabLayout 并带有过渡效果、微信小程序做电商拼团效果好吗、微信小程序购物车 滑动删除效果等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！