小程序开发学习（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代碼如下：
效果圖
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文件中寫入代碼
給出完整的.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中輸入代碼：
在.wxml中輸入代碼：
<view catchtap="handleClick"> <text class="goStudy">跳轉按鈕</text></view>然后點擊編譯查看效果
點擊跳轉時，這里不出現返回鍵，不保留跳轉前的頁面信息
和navigateTo進行對比
頁面跳轉就介紹到這里，跳轉頁面邊框和字體設計將在.wxss中會詳細介紹。
總結
以上是生活随笔為你收集整理的小程序开发学习（2）---.wxml详解篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序开发学习（1）---app.jso
- 下一篇： 小程序开发学习（4）---天气预报接口A