跳转的路径上传参如：id=7
wxml:
<navigator url="../index?id=7" >
<text>收房</text>
</navigator>
GIF图演示
sw.gif
demo代码
wxml:
<view class="xyj_article">
<!-- 这是滑动滚动导航 -->
<scroll-view scroll-x="true" scroll-into-view="{{ key }}" scroll-with-animation="true">
<view class="uploadWrap">
<view wx:for="{{ arr }}"
wx:key="sw"
class="{{_num == index ?'upload_Item':'upload_To'}}"
id="sw{{ index }}"
data-num="{{ index }}"
bindtap="clickNum">{{ item.title }}
</view>
</view>
</scroll-view>
</view>
js:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(this.options.id);//获取传递进来的参数
/*循环scroll-view 的数据*/
let arr = [
{
"title": 0
},{
"title": 1
},{
"title": 2
},{
"title": 3
},{
"title": 4
},{
"title": 5
},{
"title": 6
},{
"title": 7
},{
"title": 8
},{
"title": 9
},
];
this.setData({
arr:arr,
_num:this.options.id,
key:"sw"+this.options.id
});
}
wxss:
/*滚动*/
.uploadWrap{
width:100%;
height:100rpx;
display: flex;
display: -webkit-box;
flex-direction: column;
}
.upload_Item{
width: 100rpx;
height: 100rpx;
text-align: center;
flex: 1;
border-top: 2px solid #000
}
.upload_To{
width: 100rpx;
height: 100rpx;
text-align: center;
flex: 1;
border-top: 2px solid #fff;
}
/*这个是取消默认滚动条样式*/
::-webkit-scrollbar{width:0px}
