用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2017-4-22 00:00

作者:wy_Blog,来自原文地址一:小程序navigator的open-type跳转问题navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能open-type="n ...

作者: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. </view>
  25. </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>
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读