推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
小程序navigator的open-type跳转问题，横向左右滑动案例
发布时间:2020-11-27
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=http://www.yiyongtong.com/archives/"../../image/test1.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../image/test2.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../image/test3.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../image/test4.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../image/test1.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../image/test2.jpg"></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src=http://www.yiyongtong.com/archives/"../../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=http://www.yiyongtong.com/archives/"{{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>
