前端资源网吧 关注:1贴子:19
  • 8回复贴,共1

微信小程序开发-实现自定义分页导航栏和横屏展示隐藏默认图标

只看楼主收藏回复

功能需求点: 1. 从tabbar页面跳转到分页 2. 且分页横屏展示 3. 再从分页返回上一页(不是返回到首页) 4. 并且隐藏默认返回图标,用自定义图标代替#小程序开发#


IP属地:湖南来自iPhone客户端1楼2024-06-11 09:50回复
    使用的开发工具为:微信小程序开发工具
    已知:
    tabbar页面路径:pages/culture/culture
    跳转到的分页路径:subpkg/culture_detail/culture_detail
    我们可以用微信小程序开发里的onTapBack 的函数来实现自定义分页导航栏功能需求:


    IP属地:湖南来自iPhone客户端2楼2024-06-11 15:00
    回复
      第一步:在tabbar页面的wxml文件中设置navigator点击事件按钮,绑定跳转页面
      代码示例:
      <!--pages/culture/culture.wxml-->
      <view class="buttom-box-box">
      <navigator class="buttom-box" url="/subpkg/culture_detail/culture_detail">
      <text class="buttom-box-text">180</text>
      </navigator>
      </view>


      IP属地:湖南来自iPhone客户端3楼2024-06-11 15:01
      回复
        第二步:在分页的js文件中,定义一个事件处理函数 onTapBack,当触发该事件时,会调用微信小程序的导航API 返回到上一页。
        代码示例:
        // subpkg/culture_detail/网页链接 Page({
        onTapBack: function () {
        wx.navigateBack(
        {delta: 1}
        );
        }
        })
        其中wx.navigateBack({delta: 1}); 是一个微信小程序的导航API,用于返回上一页。通过传递一个对象参数 {delta: 1},表示返回上一页的层级数为 1。


        IP属地:湖南来自iPhone客户端4楼2024-06-11 15:01
        回复
          第三步:在分页的json文件中,定义"pageOrientation"和"navigationStyle"来设置页面横屏和隐藏默认的返回图标。
          代码示例:
          // subpkg/culture_detail/网页链接 {
          "pageOrientation": "landscape",
          "navigationStyle": "custom"
          }
          其中
          "pageOrientation": "landscape" 表示页面的方向设置为横向(横屏)显示。这意味着页面会以横向的方式展示,而不是默认的竖向。
          "navigationStyle": "custom" 表示自定义导航栏样式。当设置为 "custom" 时,微信小程序将不会显示默认的导航栏(返回图标),开发者可以自定义页面的导航栏样式和行为。开发者需要在页面中自行实现导航栏,并通过相应的 API 来控制导航栏的行为和样式。


          IP属地:湖南来自iPhone客户端5楼2024-06-11 15:01
          回复
            第四步:在分页的wxml页面绑定onTapBack触发事件
            <!--subpkg/culture_detail/culture_detail.wxml-->
            <view class="text1-box">
            <button class="back-text" bindtap="onTapBack">返回</button>
            </view>
            其中bindtap="onTapBack" 表示当返回按钮被点击时,触发 "onTapBack" 的事件处理函数,返回上一页。【完结】


            IP属地:湖南来自iPhone客户端6楼2024-06-11 15:02
            回复


              IP属地:湖南来自iPhone客户端7楼2024-07-09 18:55
              回复


                IP属地:湖南来自iPhone客户端8楼2024-07-09 18:56
                回复
                  不用小程序,微信自动的小程序可以自动旋转横屏吗


                  IP属地:广东来自iPhone客户端9楼2024-08-08 00:57
                  回复