小程序模板网

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

发布时间:2018-04-17 11:43 所属栏目:小程序开发教程

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

 

二:横向左右滑动案例

图片左右滑动效果

效果图: 

wxml代码:

 

				
  1. <scroll-view scroll-x="true">
  2. <view class="uploadWrap" scroll-x="true">
  3. <view class="upload_Item">
  4. <image class="upload_Item_img" src="../../image/test1.jpg"></image>
  5. </view>
  6. <view class="upload_Item">
  7. <image class="upload_Item_img" src="../../image/test2.jpg"></image>
  8. </view>
  9. <view class="upload_Item">
  10. <image class="upload_Item_img" src="../../image/test3.jpg"></image>
  11. </view>
  12. <view class="upload_Item">
  13. <image class="upload_Item_img" src="../../image/test4.jpg"></image>
  14. </view>
  15. <view class="upload_Item">
  16. <image class="upload_Item_img" src="../../image/test1.jpg"></image>
  17. </view>
  18. <view class="upload_Item">
  19. <image class="upload_Item_img" src="../../image/test2.jpg"></image>
  20. </view>
  21. <view class="upload_Item">
  22. <image class="upload_Item_img" src="../../image/test3.jpg"></image>
  23. </view>
  24.  
  25. </view>
  26. </scroll-view>

wxss代码:

 

				
  1. .uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}
  2. .upload_Item{ width: 160rpx; height: 160rpx; flex: 1;}
  3. .upload_Item_img{ width: 160rpx; height: 160rpx;}

wxml从后台获取数据代码:

 

				
  1. <scroll-view scroll-x="true">
  2. <view class="uploadWrap" scroll-x="true" >
  3. <view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id">
  4. <image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image>
  5. <icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon>
  6. <view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主图</view>
  7. </view>
  8. </view>
  9. </scroll-view>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23555.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询