2022-01-22 微信小程序-萌宠大作战项目(三) 实现选项卡(发布&搜索)的跳转,点击“坐标.png“返回当前位置

1.点击"坐标.png"返回当前位置

思路:在cover-image中绑定点击事件,事件函数调用moveToLocation(Object object)

复习:MapContext.moveToLocation(Object object)将地图中心移置当前定位点

代码

pages.index2/index2.wzml

         <cover-image
          bindtap="coverimgtap"
          class="coverimg"
          src="https://s3.bmp.ovh/imgs/2022/11/04/97fe92f1925e9f91.png"
         >
         </cover-image>

pages.index2/index2.js

  coverimgtap(){
    this.map.moveToLocation()
  },

2.选项卡:发布和搜索页面的相互切换

跳转页面API:wx.navigateTo()

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
官网位置:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

代码

index2.wxml

   <view class="nav">
      <view bindtap="fabu" class="fabu">发布</view>
      <view bindtap="sousuo" class="sousuo">搜索</view>
   </view>

index2.js

  coverimgtap(){
    this.map.moveToLocation()
  },
  fabu(){
    console.log('fabu')
    // 跳转到发布页面publish
    wx.navigateTo({
      url: '/pages/publish/publish',
    })
  },
  sousuo(){
   // 跳转到搜索页面search
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },