微信小程序---tabBar&页面跳转

1、tabBar

在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。

（1）tabBar相关属性

color：tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab的背景色，仅支持十六进制颜色。

borderStyle：tabbar上边框的颜色， 仅支持 black / white。

position：tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。

custom：自定义tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

（2）list

list：tab的列表。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

pagePath：页面路径，必须在pages 中先定义。

text：tab 上按钮文字。

iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

    "list": [

      {

        "text": "首页",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、页面跳转

（1）跳转普通页面

方法① navigator组件

 <!-- 跳转到普通页，可以通过返回按钮返回 -->

 <navigator url="../detail/detail">到详情页</navigator>

方法② navigateTo()方法

navigateTo()方法，用于跳转普通页面。

<view bindtap="gotoDetail">到详情页</view>

gotoDetail(){

    //使用全局api跳转，navigateTo()方法，用于跳转普通页面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

（2）跳转tabBar页面

方法① navigator组件

如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。

 <!-- 跳转到tabBar页面，不可以通过返回按钮返回。因为跳转到指定的tabBar页面后，会关闭其他所有页面 -->

<navigator url="../list/list" open-type="switchTab">到列表页</navigator>                                                                                      

方法② switchTab()方法

switchTab()方法，用于跳转tabBar页面。

  <view bindtap="gotoList">到列表页</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }

1、背景图片设置可以用服务器上的图片。

2、也可以将本地图片转成base64的。

wxml:

<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>

js:

data: {

    background: "/style/images/icon_coupon_backgroud.png",

  },

/**

  * 生命周期函数--监听页面加载

  */

  onLoad: function(options) {

    //设置背景图片

    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')

    this.setData({

      'background': 'data:image/pngbase64,' + base64

    })

    //设置导航栏标题

    wx.setNavigationBarTitle({

      title: '下发优惠券'

    })

  },

wxss:

.topview-left {

  display: flex

  flex-direction: column

  align-items: center

  justify-content: center

  width: 30%

  height: 113px

  background-repeat: no-repeat/** 不重复*/

  background-size: 100% 100%

  background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/

}

3、也可以直接设置定位实现。

         <view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">

               <image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>

                <text style="position: relativecolor:#FF9721">评价</text>

           </view>

效果：

如果你想在小程序里更换笔记的背景，可以按照以下步骤进行：

1. 打开小程序并进入笔记页面。

2. 点击右上角的“设置”按钮，选择“主题”选项。

3. 在主题列表中选择一个你喜欢的背景图案或颜色，并点击应用即可。

如果没有满意的主题可以选择，也可以自定义上传一张图片作为背景。具体 *** 作如下：

1. 进入主题设置界面后，在底部找到“自定义”选项，并点击进入。

2. 选择“从相册中选择”或者“拍摄照片”，上传一张你喜欢的图片作为背景。

3. 调整图片大小和位置以适配屏幕尺寸，并保存设置。

这样就能成功更换笔记页面的背景了。需要注意的是，不同小程序可能会有略微不同的 *** 作方式，请根据实际情况进行调整。

---