07 ScrollView 滚动视图

ScrollView 滚动视图

看看效果图：

代码：

--  来一个sprite 当容器背景
local scrollViewBack = cc.Sprite:create("image/back2.png")
scrollViewBack:setAnchorPoint(0,0)
    
local scrollView = cc.ScrollView:create()
scrollView:setPosition(winSize.width/2-500,winSize.height/2-200)
self:addChild(scrollView)
    
    
-- setContentSize 和 setContainer  都是 设置真实区域的大小（也可以理解为容器大小） 包括不可见部分
    
-- setContainer: 设置容器，可以根据一个node设置背景内容和真实区域的大小，没有设置的情况下 默认是个node（大小貌似是200*200） 
scrollView:setContainer(scrollViewBack)
       
-- setContentSize:  设置大小，不改变容器本身内容，但是设置了真实区域的大小
scrollView:setContentSize(cc.size(1920,640))
    
scrollView:setViewSize(cc.size(1000,400))       --设置可见部分的大小
scrollView:setBounceable(false)                 --设置是否回弹
    
    
for i=1,5 do
    local img = cc.Sprite:create("image/"..tostring(i)..".png")
    img:setPosition(220*(i-1)+500,200)
    scrollView:addChild(img)
end
       
--设置 滑动 方向
scrollView:setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL)
--  cc.SCROLLVIEW_DIRECTION_NONE
--  cc.SCROLLVIEW_DIRECTION_HORIZONTAL<span style="white-space:pre">	--水平
--  cc.SCROLLVIEW_DIRECTION_VERTICAL<span style="white-space:pre">	--垂直
--  cc.SCROLLVIEW_DIRECTION_BOTH
   

local function scrollViewEvent()
    --print("滚动")
    --  可以获取当前滑动的百分

    --  <span style="font-family: Arial,Helvetica,sans-serif;">滑动量               --两种写法</span>

  --local offsetX = scrollView:getContainer():getPositionX()
  local offsetX = scrollView:getContentOffset().x
   
  -- 总长度 - 可视长度   --两种写法
  --local lenth = scrollView:getContainer():getContentSize().width - scrollView:getViewSize().width
  local lenth = scrollView:getContentSize().width - scrollView:getViewSize().width
   
  print( offsetX / lenth * -100)

end

scrollView:setDelegate() --开启代理 没开启则回调无效

--设置回调

--设置滚动时候回调scrollView:registerScriptHandler(scrollViewEvent,cc.SCROLLVIEW_SCRIPT_SCROLL)

还有一些其他的接口：

--  设置内容的偏移       参数2 是否开启动画
--  setContentOffset(cc.p(x,y),bool animated) 
--  设置内容的偏移       参数2 时间
--  setContentOffsetInDuration(Vec2 offset,float dt)
--  getContentOffset()
    
--  设置缩放        参数 缩放比例       是否开启动画    （设置缩放不知道是bug还没修正还是自己代码没写对，没有效果）
--  setZoomScale(float s)   参数 缩放比例
--  setZoomScale(float s,bool animated)    参数 缩放比例       是否开启动画 
--  setZoomScaleInDuration(float s,float dt    )参数 缩放比例       动画时间
--  local function scrollViewEvent2()
        --print("ZOOM")
--  end
--  设置回调
--  设置缩放时候回调
--  scrollView:registerScriptHandler(scrollViewEvent2,cc.SCROLLVIEW_SCRIPT_ZOOM)