小程序开发学习（2）---.wxml详解篇

文章目录

1.轮播图
- 1.1、swiper
- - 1.1.1 indicator-dots
  - 1.1.2 indicator-color
  - 1.1.3 indicator-active-color
  - 1.1.4 autoplay
  - 1.1.5 interval
- 1.2 swiper-item容器
- - 1.2.1 image
2.加载图片
- 2.1class
3.页面跳转
- 3.1 navigateTo跳转
- - 3.1.1 url
  - 3.1.2 open-type
  - 3.1.3 hover-class
- 3.2 bindtap跳转
- - 3.2.1 bindtap
- 3.3 botton跳转
- 3.4 catchtap跳转

本文主要介绍一些.wxml里的一些属性和功能

1.轮播图

可以实现左右滑动图片，切换图片的效果

1.1、swiper

滑块视图容器，其中只可放置swiper-item组件，否则会导致未定义的行为

1.1.1 indicator-dots

indicator-dots属性是是否显示面板指示点，选择indicator-dots='true'，才能看到上面的指示点；

1.1.2 indicator-color

indicator-color属性是指示点颜色，如选择indicator-color='yellowgreen'
效果图

1.1.3 indicator-active-color

indicator-active-color属性是当前选中的指示点颜色，如选择：indicator-active-color="pink"
效果图

1.1.4 autoplay

autoplay属性是否自动切换图片，选择autoplay="true"，自动会切换图片，后面还得设置间隔多久切换图片，就要学下一个属性

1.1.5 interval

interval属性是自动切换时间间隔，选择interval="1000"，即1s，单位默认为ms，因为效果是动态的，无法演示，就不进行演示操作了

1.2 swiper-item容器

swiper-item仅可放置在swiper组件中，宽高自动设置为100%

1.2.1 image

采用<image src='/lsq/img/luo1.jpg' class='img'></image>，插入图片就能完成轮播图的设置了
完整的.wxml代码如下：

<swiper indicator-dots='true' indicator-color='yellowgreen' indicator-active-color="pink" interval="1000" autoplay="true">
<swiper-item >
<image src='/lsq/img/luo1.jpg' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/luo2.jpg' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/luo3.jpg' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/luo4.png' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/luo5.png' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/播放.png' class='img'></image>
</swiper-item>
<swiper-item >
<image src='/lsq/img/设置.png' class='img'></image>
</swiper-item>
</swiper>

效果图

2.加载图片

图片加载属于比较简单的一般采用<image></image>就能完成，但是设置图片比例大小和怎么样设置图片位置就不是那么简单，就要用到后面的.wxss设置格式，我们将在后面再去介绍，今天主要介绍关于.wxml的内容
比较简单，找到图片保存的地址就好了，如：<image src='/lsq/img/luo1.jpg' class='img'></image>

2.1class

介绍一下class ="img"在.wxml中写入，是方便后面再.wxss里面写入图片信息，然后在.wxss中填入图片怎么设置就好了，这个我们将在后面会讲的

3.页面跳转

实现页面跳转有很多种方法，下面我介绍集中我学会的几种方法

3.1 navigateTo跳转

保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面，使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

3.1.1 url

需要跳转的应用内非tabBar的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；也可以直接写绝对路径，如 url='/pages/weixin/weixin'

3.1.2 open-type

open-type属性是微信开放能力，如：open-type="navigate"

3.1.3 hover-class

hover-class属性是指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果，这里我们可以设置点击时效果哦，如：hover-class="nav-hover"，然后在.wxss中设置跳转时颜色就好了，在.wxss设置为点击时为红色效果，下面演示一下设置后效果

给出navigate的完整代码：<navigator style='display :inline;' url='/pages/weixin/weixin' open-type="navigate" hover-class="nav-hover"><ol><text class="goStudy">跳转到新页面</text></ol> </navigator>

不同风格的按钮可以通过修改.wxss的内容去完成

3.2 bindtap跳转

这个也是能够保留原来界面的，和第一种差不多，重复的就不再介绍了

3.2.1 bindtap

bindtap属性是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数，保留当前页面跳转到其他页面，写入代码：bindtap="handleClick"
需要在对用的.js文件中写入代码

handleClick(){//保留当前页面跳转到新的界面wx.navigateTo({url: '/pages/weixin/weixin',})},

给出完整的.wxml代码：

<view class="goStudy" bindtap="handleClick" hover-class="nav-hover">
<text>点击跳转</text>
</view>

class和hover-class上面已经介绍了，就不再重复介绍了

3.3 botton跳转

botton和上面的bindtap类似，相当于按钮一样，具体跳转的一些属性介绍就和上面相同，也是可以保留原来的界面，给出bindtap和botton代码：

<view>
<!-- 注释：保留当前页面跳转到其他页面 -->
<view class="goStudy" bindtap="handleClick" hover-class="nav-hover">
<text>点击跳转</text>
</view>
<!-- 注释：保留当前页面跳转到其他页面 -->
<button class="goStudy" bindtap="handleClick" hover-class="nav-hover"><text>跳转按钮</text></button>

查看效果图

其实实际效果还是有区别的，里面边框颜色和填充颜色是不同的，但是总体上区别不大

3.4 catchtap跳转

catchtap和上面三种就有区别了，它不能保留原始界面，即不能返回到原来的界面，其用法和navigateTo的是差不多的
在.js中输入代码：

 handleClick(){//点击跳转到weixin界面（不保留当前页面跳转到新的界面）wx.redirectTo({url: '/pages/weixin/weixin',})},

在.wxml中输入代码：

<view catchtap="handleClick">
<text class="goStudy">跳转按钮</text></view>

然后点击编译查看效果

点击跳转时，这里不出现返回键，不保留跳转前的页面信息

和navigateTo进行对比

页面跳转就介绍到这里，跳转页面边框和字体设计将在.wxss中会详细介绍。