30多岁学编程 2022-08-11 07:16 采纳率: 50%
浏览 93
已结题

微信小程序实现跳转到tabbar页面的指定位置

微信小程序怎么用js实现从tab页面A跳转到另一tab页面B中的某个盒子上(注:跳转动态路径。如下:)
希望详细一点,怕看不懂。

图一、页面A

img

图二、页面A的wxml

img

图三、页面B的wxml

img

  • 写回答

7条回答 默认 最新

  • ZionHH 2022-08-11 10:26
    关注

    img

    index页面

    <view>
      <view
        wx:for="{{list}}"
        wx:key="index"
        data-item="{{item}}"
        class="list-item"
        bindtap="toImage">
        跳转到tab上指定图片{{item.code}}</view>
    </view>
    
    const app = getApp()
    
    Page({
      data: {
        list: [
          { code: 1, name: '给梵蒂冈法国广泛大概' },
          { code: 2, name: '官方哥特人特多' },
          { code: 3, name: '风格非常vv现场v的' }
        ]
      },
      // 点击跳转
      toImage(e) {
        // switchTab不支持传参,我们这里通过globalData来传递
        const { item } = e.currentTarget.dataset
        app.globalData.imgCode = item.code
        wx.switchTab({
          url: `/pages/my/index`
        })
      }
    })
    

    my页面

    <scroll-view class="wrap" style="height: 100vh;" scroll-y scroll-into-view="{{imgContainer}}" scroll-with-animation>
      <view
        wx:for="{{imgList}}"
        wx:key="index"
        id="img_{{item.code}}"
        class="img-item">
        图片{{item.code}}
      </view>
    </scroll-view>
    
    const app = getApp()
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        imgList: [
          { code: 1, url: '' },
          { code: 2, url: '' },
          { code: 3, url: '' }
        ],
        imgContainer: ''
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        const { imgCode } = app.globalData
        const imgContainer = imgCode ? `img_${imgCode}` : null
        this.setData({
          imgContainer
        })
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide() {
        // 离开清空
        app.globalData.imgCode = null
      },
    })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 8月22日
  • 已采纳回答 8月14日
  • 创建了问题 8月11日

悬赏问题

  • ¥15 我知道什么是混合树,但是怎么写代码啊
  • ¥50 开发板linux系统安装dpkg,apt函数库 有偿
  • ¥15 浏览器时间循环 交互事件和延时事件的 优先级与执行问题
  • ¥15 GD模块安装出错,libgd无法正常安装
  • ¥20 求有缘人帮我把笛卡尔坐标系转换为经纬度 有偿
  • ¥15 vue2中使用计算属性
  • ¥50 远程桌面打开Mastercam、没有许可证、物理机打开正常
  • ¥15 ubuntu安装gdal后java读取tif文件报错
  • ¥15 请问lammps怎么做两种金属连接的原子浓度分布图
  • ¥15 求jacquard数据集