• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序scroll-view

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<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
})
}
})
 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
FinClip小程序+Rust(三):一个加密钱包发布时间:2022-07-18
下一篇:
小程序实现textarea行数自动增加发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap