小程序之选项卡（动态获取数据选项）

最新推荐文章于 2021-08-11 14:21:30 发布

lkyhhy

最新推荐文章于 2021-08-11 14:21:30 发布

阅读量2.2k

点赞数 2

分类专栏：小程序、选项卡、动态获取文章标签：小程序、选项卡、动态获取

本文链接：https://blog.csdn.net/qq_43062569/article/details/89861066

版权

本文介绍了如何在小程序中使用swiper组件创建选项卡功能。通过参考网上资源，结合后台数据，实现在wxml页面布局，调整样式，并在js中处理动态获取的数据，以动态渲染选项卡内容。navlist和content数据通常从服务器请求获取。

摘要由CSDN通过智能技术生成

一、
先写页面，在wxml使用swiper轮播图可实现选项卡功能（这部分我也是参考了网上的小伙伴的分享）。

<view class='topTabSwiper'>
    <block wx:for="{
  {navlist}}" wx:key="index">
      <view class='tab  {
  {currentData == index ? "tabBorer" : ""}}'  data-current = "{
  {index}}" bindtap='checkCurrent'>{
  {item.name}}</view>
    </block>
</view>
<swiper current="{
  {currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <block wx:for="{
  {content}}" wx:key="index">
    <swiper-item><view class='swiper_con'>{
  {item.name}}</view></swiper-item>
  </block>>
</swiper>

二、样式