微信小程序scroll-view
<scroll-view class='tabli' scroll-x="true" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<view class='item' wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">{{navItem}}</view>
</scroll-view>
.tabli{
height:80rpx;
width:100%;
box-sizing:border-box;
/* overflow:hidden;
line-height:80rpx;
background:#f7f7f7;
font-size:14px; */
white-space:nowrap;
/* position:fixed;
top:0;
left:0;
z-index:99; */
}
.daohangwrap{
width: 100%;
}
.tabli .item{
width: 20%;
display: inline-block;
text-align: center;
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
pixelRatio: '',
windowHeight: '',
windowWidth: '',
arr: [
"导航1", '导航2', '导航3', '导航4', '导航5', '导航6', '导航7', '导航8'
],
navScrollLeft:0,
currentTab:0
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
//事件处理函数
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
checktab:function(e){
console.log(e.currentTarget.dataset.index);
var current = e.currentTarget.dataset.index;
var singleNavWidth = this.data.windowWidth / 5;
this.setData({
navScrollLeft: singleNavWidth*(current-2),
})
if (current == this.data.currentTab){
return false;
}else{
this.setData({
currentTab: current
})
}
},
switchtab:function(e){
var current = e.detail.current;
console.log("获取导航位置"+current);
this.setData({
navScrollLeft: (current-2)*(this.data.windowWidth/5),
currentTab: current
})
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
