（八）顶部导航栏+swiper+template自定义模板的使用

最新推荐文章于 2024-08-23 12:08:38 发布

Dolag

最新推荐文章于 2024-08-23 12:08:38 发布

阅读量772

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/YF_User/article/details/97623651

版权

微信小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

wxml中：

<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">推荐</view>  
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">按订单量</view>  
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">按评分</view>  
</view>


<swiper current="{{currentTab}}" duration="300" style="height:{{height}}" class="swiper-box">

    <!-- 推荐 -->
    <swiper-item>
      <view wx:for="{{card}}" wx:key="key" wx:for-item="item" wx:for-index="idx">
      <view data-id="{{idx}}" bindtap="recommendDetail">
       <template is="recommend-card" data="{{item:item,idx:idx}}"/>
       </view>
      </view>
    </swiper-item>
    </swiper>

使用template模板的时候需要在wxml和wxss中引用

<import src="../template/list_home_cmp.wxml"/>
@import "../template/list_home_cmp.wxss";

wx:for-item=“item”–>代表数据在模板wxml中可以直接{{item.XXX}}使用
wx-for-index=“idx”–>代表下标在模板wxml中直接{{idx}}可以获取当前下标

JS：

  点击tab切换 
   
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    }else if (e.target.dataset.current == 0){
      var length = that.data.length  //获取数据的长度
      var height = length * 240
      var hei = height+"rpx"  //根据返回数据的内容自定义高度
      that.setData({
        currentTab: e.target.dataset.current,
        height: hei
      })
    }

wxss：

@import "../template/list_home_cmp.wxss";
.search-top{
    position: fixed;
    height: 75rpx;
    width: 100%
}
.search-input{
    height:60rpx;
    background-color: #eff2f5;
    border:none;
    border-radius: 30rpx;
    margin:7rpx 30rpx 0rpx 30rpx;
    padding-left: 60rpx;
    padding-right: 30rpx;
    font-size: 28rpx;
    color: #666;
}
.input{
  font-size: 30rpx;
  padding-top: 10rpx;
}
.swiper-tab{  
    width: 100%;  
    border-bottom: 1rpx solid #e0e0e0;  
    text-align: center;  
    line-height: 80rpx;
    position: fixed;
    top:75rpx;
    background-color: rgba(250, 250, 250,1);
 }  
.swiper-tab-list{
    font-size: 28rpx;  
    display: inline-block;  
    width: 25%;  
    color: #a0a0a0;  
}  
.on{ color: #16a085;  
    border-bottom: 5rpx solid #16a085;}   
.swiper-box{
    margin-top: 160rpx;
}