工作笔记【二】

看代码顺便记录下学到的东西。

<u-navbar leftText="值机须知" :fixed="false" :safeAreaInsetTop="false" leftIconColor="#fff" :placeholder="true" bgColor="transparent" :autoBack="true"></u-navbar>

<u-navbar> Vue.js框架的UniApp组件，常见的导航栏组件，用于显示页面的标题和导航功能。

leftText：这是导航栏左侧的文字内容。

fixed：这个是控制导航栏是否要固定在屏幕顶部。false就是不固定，参考爱奇艺导航栏，就是固定的。

safeAreaInsetTop：这个决定了导航栏上方留出的安全区域的间距，一般是用于避免屏幕刘海遮挡。

：placeholder：这个前面带冒号的，是用来控制是否显示占位符的，设置为true，导航栏会显示一个占位符。

：autoBack：控制是否自动显示返回按钮，true表示会自动显示返回按钮，用于返回上一个页面。

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient：CSS的一个函数，用于创建线性（水平、垂直、斜向）渐变背景。

        direction：渐变的方向，角度和关键词都可以，省略的话默认是从上到下（to bottom）；

        color-stop：颜色和位置，每个颜色的停止点可以是一个颜色值，可以包括透明度，也可以指定位置。

backgroundColor: 'rgba(61, 146, 204,' + lucency + ')',

设置背景颜色，rgba是表示红绿蓝和透明值。

lucency：透明度值，从0（完全透明）-1（安全不透明）。

<div class="lattice">
    <div class="items" v-for="(item, index) in lattice" :key="index">
        <image :src="item.icon" class="lattice-icon" mode="aspectFit"></image>
        <div class="lattice-name">{{ item.name }}</div>
    </div>
</div>

这段代码实现了一个网格布局，每个网格项包含一个图片和一个名称。

lattice数组的每个元素都表示一个网格，图片url和名称是动态绑定的。

通过Vue.js的v-for指令，能够自动渲染数组中的所有项目，并且应用相应的样式。

内层div中，v-for用于循环渲染lattice数组中的每个元素，每个值赋给item，每个索引赋给index；

：key="index"：关键属性，用于跟踪每个渲染元素。

mode：设置图片的显示模式，aspectFit表示保持图片的纵横比，使用容器大小。

<!-- #ifdef MP-WEIXIN -->
<div class="tab-bar-place"></div>
<!--#endif-->

这个代码片段用于条件编译，特别是在多平台开发环境中，常用于开发跨平台应用时，允许在不同的平台上有不同的代码执行。比如在开发微信小程序时，可能需要特定的元素或代码来适应该平台的需求，而在其他平台上则忽略这些代码。它的作用是根据条件编译指令来决定是否包含某些代码块。

< ! - -  #ifdef MP-WEIXIN - - >：这个表示只有在MP-WEIXIN这个条件为真时，才包含这段代码，一般指特定的平台或者环境标识，比如微信小程序。

< ! - -  #endif - - >：结束条件的标记，如果条件为真，这条语句之前的代码将被包括在最终的输出中，否则会被忽略。

<picker :range="array"></picker>

<picker>是Vue.js的一个组件，用于实现选择器功能。

:range：Vue的绑定语法，将array变量绑定到range属性上。

onShow() {
    if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
            selected: 1
        });
    }
}

这段代码在页面显示时检查是否能够获取到 TabBar，然后将第二个 TabBar 项设置为选中状态。

onShow()：这个函数的作用是处理页面每次显示时要执行的逻辑。

typeof this.$mp.page.getTabBar === 'function'   这个条件判断getTabBar是否是一个函数，确保调用之前是可用的。

this.$mp.page.getTabBar ： 进一步检查是否能返回一个有效的TabBar对象。

selected：1 ：表示将第二个（第一个是0）选项设置为选中状态。

这种代码通常用于小程序开发中，尤其是在使用微信小程序时。开发者可能希望在用户访问某个页面时更新底部的 TabBar 以反映当前的选择。例如，如果用户进入了一个特定的页面，开发者可能希望在 TabBar 中标记这个页面为选中状态，以提升用户的导航体验。

<map id="map" class="map" :latitude="latitude" :longitude="longitude"></map>

<map> 是Vue.js 或类似框架中展示地图组件的。

这段代码用于在页面上嵌入一个地图组件，并通过绑定 latitude 和 longitude 属性来设置地图的中心位置。组件的样式和行为依赖于实际的地图库或框架。