微信小程序如何实现一个支持长尾词搜索功能的选项卡界面？

本文共计987个文字，预计阅读时间需要4分钟。

原文示例为：本文实例为大家分享了微信小程序实现选项卡的具体代码，供大家参考，具体内容如下：效果图+实现的功能：点击上面选项卡，下面商品内容实现切换，滑动下面的商品页面，上面的选项卡实现滚动。

改写后为：本文展示了微信小程序实现选项卡的代码实例，内容涵盖：效果展示+功能实现：点击顶部选项卡，下方商品内容可切换，滑动商品页面，顶部选项卡随之滚动。

本文实例为大家分享了微信小程序实现选项卡的具体代码，供大家参考，具体内容如下

效果图

实现的功能：点击上面选项卡，下面商品内容实现切换，滑动下面的商品页面，上面的选项也随页面进行切换。

text.wxml：

<!-- 分类 --> <view class='listMiddle swiper-tab'>   <view class='middle {{currentTab==0? "action" : ""}}' data-current="0" bindtap="clickTab">     全部   </view>   <view class='middle {{currentTab==1? "action":""}}' data-current="1" bindtap="clickTab">     分类1   </view>   <view class='middle {{currentTab==2? "action":""}}' data-current="2" bindtap="clickTab">     分类2   </view>   <view class='middle {{currentTab==3? "action":""}}' data-current="3" bindtap="clickTab">     分类3   </view> </view> <!-- 精选商品 --> <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" > //注意这里只是写了循环出来一条数据，要实现多条数据，要学会用数据嵌套循环哦~~   <swiper-item wx:for="{{jingxuan}}">     <view class='loopmiddle'>       <view class='lo-left'>         <image src='{{item.hua}}'></image>       </view>       <view class='lo-middle'>         <view>{{item.guo}}</view>         <view>{{item.zhigong}}</view>         <view class='loo-bottom'>           <text>{{item.qi}}</text>           <image src='{{item.huo}}'></image>           <text>{{item.fen}}</text>         </view>       </view>       <view class='lo-right'>         <image src='{{item.xiaoche}}'></image>       </view>     </view>   </swiper-item> </swiper>

test.js

var app = getApp() Page({   /**    * 页面的初始数据    */   data: {     jingxuan: [{       hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥71.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },       {       hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥72.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },       {       hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥73.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },       {       hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥74.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },     ],     currentTab: 0,   },   //滑动切换   swiperTab: function (e) {     var that = this;     that.setData({       currentTab: e.detail.current            });     console.log(e.detail.current)   },   //点击切换   clickTab: function (e) {     var that = this;     if (this.data.currentTab === e.target.dataset.current) {       return false;     } else {       that.setData({         currentTab: e.target.dataset.current       })     }   } ,

text.wxss

/* 分类 */ .listMiddle{   display: flex;   font-size: 40rpx;   border-bottom: 1px solid #ebebeb;   height: 90rpx;   line-height: 90rpx;   } .middle{    margin-left: 60rpx;     height: 90rpx;    width: 120rpx; } .action{   height: 90rpx;   width: 120rpx;   color: #3ad965;   border-bottom:2px solid #3ad965; } /* 精选商品开始 */ .loopmiddle{    width: 690rpx;   margin: 5rpx auto 0;   /* overflow: hidden; */   display: flex;   margin-bottom: 40rpx;   border-bottom: 1rpx solid #eff0f4; } .lo-left{   /* float: left; */   height: 250rpx;   width: 250rpx; } .lo-left image{   height: 250rpx;   width: 250rpx; } .lo-middle{   margin-top:40rpx; } .lo-middle view:nth-child(1){   font-size:25rpx;   color:#676767;   margin-left: 10rpx; } .lo-middle view:nth-child(2){   font-size:20rpx;   color:#adadad;   margin-top:20rpx;   margin-left: 10rpx; } .loo-bottom{   margin-top: 40rpx; } .loo-bottom text:nth-child(1){   margin-right: 15rpx;   font-size:40rpx;   color:#fe6400; } .loo-bottom text:last-child{   font-size:20rpx;   color:#4b3333; } .loo-bottom image{   width: 35rpx;   height: 35rpx;   vertical-align: middle; } .lo-right{   width: 50rpx;   height: 50rpx; } .lo-right image{    width: 50rpx;   height: 50rpx; } .lo-right{   margin-top:170rpx; } .active{   color:aqua;   border-bottom: 4rpx solid red; } .swiper-tab{   width: 100%;   border-bottom: 2rpx solid #ccc;   text-align: center;   height: 88rpx;   line-height: 88rpx;   font-weight: bold; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。