|
作者：wy_Blog，來自原文地址
navigator的open-type屬性 可選值 'navigate'、'redirect'、'switchTab'，對應于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
open-type="navigate"等價于API的 wx.navigateTo 而wx.navigateTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑
open-type="redirect"等價于API的 wx.redirectTo 而wx.redirectTo的url是需要跳轉的應用內非 tabBar 的頁面的路徑
open-type="switchTab"等價于API的 wx.switchTab而wx.switchTab的url是需要跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
最后一個switchTab事件觸發(fā)以后 把前面的頁面都關閉了
二：橫向左右滑動案例
圖片左右滑動效果
效果圖：
wxml代碼：
-
<scroll-view scroll-x="true">
-
<view class="uploadWrap" scroll-x="true">
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test1.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test2.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test3.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test4.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test1.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test2.jpg"></image>
-
</view>
-
<view class="upload_Item">
-
<image class="upload_Item_img" src="../../image/test3.jpg"></image>
-
</view>
-
-
</view>
-
</scroll-view>
wxss代碼：
-
.uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}
-
.upload_Item{ width: 160rpx; height: 160rpx; flex: 1;}
-
.upload_Item_img{ width: 160rpx; height: 160rpx;}
wxml從后臺獲取數據代碼：
-
<scroll-view scroll-x="true">
-
<view class="uploadWrap" scroll-x="true" >
-
<view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id">
-
<image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image>
-
<icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon>
-
<view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主圖</view>
-
</view>
-
</view>
-
</scroll-view>
|
