微信小程序的路由跳转传值，及导航栏、轮播图实现

最新推荐文章于 2024-07-06 16:35:23 发布

猜不到我是谁

最新推荐文章于 2024-07-06 16:35:23 发布

阅读量1.2k

点赞数 1

分类专栏：前端学习微信小程序导航栏轮播图文章标签：前端微信小程序导航栏轮播图路由跳转传值

本文链接：https://blog.csdn.net/qq_43043859/article/details/90410005

版权

本文介绍了微信小程序中如何实现导航栏和轮播图的效果，包括点击和滑动跳转功能。通过使用swiper组件完成轮播图的展示，并详细阐述了路由跳转传值的实现过程，从起始页面到跳转页面的完整流程。

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

导航栏

效果图

在这里插入图片描述

功能

点击跳转以及滑动跳转

实现

使用小程序swiper组件

代码

在这里插入图片描述

全部代码

<view class="mineRegister-container">
  <!--顶部导航栏-->
  <view class="swiper-tab">
    <view class="tab-item {
    {currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="switchNav">第一部分</view>
    <view class="tab-item {
    {currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="switchNav">第二部分</view>
    <view class="tab-item {
    {currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="switchNav">第三部分</view>
  </view>
 
  <!--内容主体-->
  <swiper class="swiper" current="{
    {currentTab}}" duration="200" bindchange="swiperChange">
    <swiper-item>
      <block wx:if="{
    {djList.length<1}}">
        <view class='kby'>
          <image src='../../../../images/kb@3x@2x.png'></image>
          <text>暂无数据...</text>
        </view>
      </block>
      <block wx:eles>
        <view wx:for="{
    {djList}}" wx:key="index">
          <view class='list' bindtap='goPage' id='{
    {item.id}}'>
            <view class='list-left'>
              <image src='{
    {item.img}}'></image>
            </view>
            <view class='list-right'>
              <view class='list-right-t'>
                <view>
                  <text>{
  {item.name}}</text>
                  <text>{
  {item.age}}岁</text>
                  <text>{
  {item.sex}}</text>
                </view>
                <view class='status'>{
  {item.status}}</view>
              </view>
              <view class='list-right-b'>
                <text>地点：{
  {item.address}}</text>
                <text>时间：{
  {item.time}}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </swiper-item>
    <swiper-item>
      <block wx:if="{
    {fxList.length<1}}">
        <view class='kby'>
          <image src='../../../images/kb@3x@2x.png'></image>
          <text>暂无数据...</text>
        </view>
      </block>
      <block wx:eles>
        <view wx:for="{
    {fxList}}" wx:key="index">
          <view class='list'>