小程序navigator的open-type跳转问题，横向左右滑动案例

作者：wy_Blog，来自原文地址

小程序navigator的open-type跳转问题" style="margin: 20px 0px; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif; font-weight: 500; line-height: 40px; color: rgb(44, 62, 80); text-rendering: optimizeLegibility; font-size: 21px; background-color: rgb(249, 249, 245);">一：小程序navigator的open-type跳转问题

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事件触发以后　把前面的页面都关闭了

二：横向左右滑动案例

图片左右滑动效果

效果图： 

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>