小程序开发（二）-页面样式

项目迟晌根目录下创建 app.wxss 文件，文件定义的样式规则适用于所有页面。采用css定义样式。

小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件，文件的样式只适用于当前页面。

rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。

weui是腾讯官方维护的UI框架，我们可以直接拿来用。

将weui库中dist目录下的app.wxss拷贝到我们项目中的 app.wxss 中，在wxml文件中直接使用定义好的伏旦规则, 如 weui-btn 。

图片使用 image 标签。默认宽度为屏幕宽码厅锋度。

图片轮播使用 swiper 标签。

1.使用内置组件scroll-view

2.实现点击时出现的背景样式

3.使用scroll-into-view，实现点击时自动滚动

前言

本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！

本次效果展示

 

一、如何实现页面tab

1.使用内置组件scroll-view

如下图所示，我们需要使用到红色框框中的属性，此属性可也实现滚动

这里有一个大坑，不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列（这里我们只关注scroll-x、scroll-y）

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index?'active':''" @click="changeTab(index)">

{{item}}

</view>

</scroll-view>

<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">

<view v-for="(item,index) in 100 " :key='index'>

{{item}}

</view>

</scroll-view>

我们只能通过样式来改变它，让它横过来

.scroll-view-t view {

display: inline-block

font-size: 32rpx !important

margin: 0 15rpx

}

.scroll-view-t {

white-space: nowrap

height: 88rpx

line-height: 88rpx

}

 

2.实现点击时出现的背景样式

这里我们需要定义一个默认的索引currentIndex,在通过点亏明击事件所传出去的索引进行判断，从而凳唤获得当前所点击的对象给到样式，样式我们就用三元表达式判断赋予样式，如下点击方法

changeTab(index) { //nabbar栏点击切换

// if (this.currentIndex === index) return

this.currentIndex = index

// this.scrollinto = 'tab' + index

// if (this.currentIndex <10) {

// this.scrollinto = 'tab0'

// }

},

如下是绑定的点击事件和三元表达式判断赋予样式，其中背景样式提前写好了 

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index?'active':''" @click="changeTab(index)">

{{item}}

</view>

 不过现在只实现了通过点击样式发生改变，感觉实现了tab切换，眼下要解决点击时tab这个导航条也要自己滚动起来，不能一边手动滚动，然后再点击吧

3.使用scroll-into-view，实现点击时自动滚动

使用它的目的主要是，在点解tab时可以实现，你向那个方向点，他就往那个方向滚动，不过在点回去的时候，就有坑了，需要对其作出判断 

 阅读文档很难理解对吧，我在这里说说我的理解，这里是想要我们通过在scroll-view中属性scroll-into-view绑定一个元素，此元素还要获得id,此枣空凯id还不能已数字开头，此id就是移动的关键，需要绑定，所遍历内容的索引，从而实现往哪里滚动，不过想点回去就需要进行判断

如下代码中在scroll-view，使用scroll-into-view绑定了一个自己定义的空元素scrollinto

在v-for遍历后获得了索引，id就通过索引进行了绑定,拼接了以tab开头

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index"

:class="currentIndex==index?'active':''" @click="changeTab(index)">

{{item}}

</view>

</scroll-view>

实现点击滚动很简单，要滚动回去就要判断了，如下代码，只要当前的this.scrollinto = 'tab' + index就能实现点击就滚动，回去是就要判断当前点击的缩影，手动赋值，给一个最好的区间，这样效果更好

changeTab(index) { //nabbar栏点击切换

if (this.currentIndex === index) return

this.currentIndex = index

this.scrollinto = 'tab' + index

if (this.currentIndex <10) {

this.scrollinto = 'tab0'

}

},

手机开启微信悬浮窗的 *** 作步骤如下：敏高型

1.首先打开微信的【订阅号】选项，进入订阅号的阅读界面。

2.接着点击需要开启浮窗功能的公众号，这里演示以打开百度地图的公众号的悬浮窗功能。

3.点开公众号的任何一篇文章，然后在文章的右上角点击【三点】呼出公众号的菜单选项。

4.在底部的菜单中，选择【浮窗】这个选项，点击该选项即可开启该公众号的悬浮窗功能。

5.此时，悬浮窗就会出现桥猜在桌面上，图标对应的就是开启悬浮功能的公众号的念慧图标。

6.如果需要关闭某个公众号的悬浮窗功能，只需要使用相似的 *** 作，点击【取消浮窗】即可。这就是微信开启/关闭悬浮窗的方法。

---