小程序学习-滚动驱动动画示例

小程序学习-滚动驱动动画示例

滚动驱动动画示例

(1) 设置控件居中,需要设置父控件的css样式

view { display: flex;/*flex弹性布局*/ align-items: center;/*item在交叉轴上的对齐方式*/ justify-content: center;/*item在主轴上的对齐方式*/}

(2) #scroller:scroll-view,整个scroll-view

  • scroll-y:y方向滚动;
  • throttle:不清楚,查了文档scroll-view没有这个属性;
  • data-status-bar-height:将数据绑定到组件,事件触发时,在targetdataset对象中可以获取到转换后的属性statusBarHeight

(3) .nav:view,导航栏区域;通过style行内样式设置padding-top,不推荐使用行内样式;

  • wxcss文件中的.nav样式:
    .nav { position: fixed;/*fixed相对于浏览器窗口定位;absolute相对于有position属性的父元素定位;relative相对于自身的原始位置定位*/ top: 0; width: 100%; background-color: #000; height: 44px; padding-top: env(safe-area-inset-top);/*获取上边框安全距离,适配iphoneX全面屏*/ z-index: 1;/*设置元素的堆叠顺序,数字大的在上面,可以为负值,必须是设置了position属性的元素*/}
  • open-data 用于展示微信开放的数据。userNickName获取用户昵称;userAvatarUrl获取用户头像;userProvince获取用户省份;userCity获取用户城市;
  • .search_bar搜索框: style行内样式设置top属性;因为.search_barposition属性值为absolute,相对于有position属性的父元素定位,即为相对于.nav进行定位,距离它的顶部20px。
  • .search_input,输入框的样式:
    .search_input { text-align: left; display: inline-block;/*行内块级元素*/ width: 10%;/*宽度为父元素宽度的10%*/ background-color: #F3F3F3; color: #888; height: 25px; line-height: 25px; font-size: 12px; border-radius: 3px;/*圆角*/ overflow: hidden;/*超过部分隐藏*/}
  • .search_input text:text,输入框中的文本样式:
    .search_input text { padding-left: 20px;/*内左边距,预留icon位置*/ line-height: 25px; display: inline-block; height: 25px;}
  • .search_bar icon: icon,微信提供的一些默认图标

(4) .info内容区域

  • .info的样式:
    .info { margin-top: env(safe-area-inset-top);/*外上边距,预留状态栏高度*/ padding-top: 44px;/*内上边距,预留nav高度*/ /* display: flex; */ background-color: white;}
  • .avatar头像,行内样式top: {{((statusBarHeight + 44) - 80) - 5}}px,设置top为-21px和sticky一起使用当头像位置超过父元素(此处为scroll-view)21px之后固定;css文件中的样式为:
    .avatar { /* display: inline-block; */ display: flex; border-radius: 100%; border: 2px solid #FAFAFA; height: 100px; width: 100px; overflow: hidden; /* position: absolute; */ left: 20px; /* top: 10px; */ will-change: transform;/*提前告知浏览器该元素要进行transform动画,避免开始动画时闪屏*/ /* transition: transform .03s linear; */ z-index: 2;/*在导航栏图层上面*/ /* contain: strict; */ position: sticky;/*粘性定位,主要用在scroll-view中,相对于最近的scroll-box类型(含有滚动条或者设置了overflow属性)的父元素进行定位,当超过了设置的top/right/bottom/left的值时会固定*/ /* top: -20px; */ transform: translateY(-20px);/*通过transform属性对元素进行旋转,缩放,倾斜,平移等操作,顺序为rotate, scale, skew, translate*/ transform-origin: left 75%;/*元素transform动画的原点,相对于元素左上角的距离,默认为自身中心点*/}
  • .intro简介,bindtap绑定点击事件
  • .scroller2: scroll-view,页面中间的scroll-view;scroll-x设置滚动方向为横向滚动;bindscroll绑定滚动事件;bindtouchend绑定触摸结束事件;scroll-with-animation设置滚动条位置时是否使用动画;scroll-left设置横向滚动条的位置;
  • menu_wrap,scroll-view下的子控件,设置足够的宽度来显示内容;样式为:
    .menu_wrap { white-space: nowrap;/*所有内容显示在一行,不换行*/ padding: 9px 0; position: relative;}
  • .menu_item_more查看更多按钮,通过滚动动画控制是否显示;

(5) js内容

  • scrollLeftscrollTop属性,该元素显示内容与实际内容的距离,或者说向左或向上滚动的距离
  • scrollWidthscrollHeight属性,该元素内容的实际宽度和高度
  • deltaXdeltaY属性,向右和向上滚动时返回正值,向左和向下滚动时返回负值
  • createSelectorQuery()创建选择器,用于选取指定元素
  • select()指定选择器,选取第一个匹配到的元素
  • fields(Object, Function)获取节点信息,Object中指定需要返回哪些节点信息,Function回调方法,里面有需要的节点信息
  • this.animate(selector, keyframes, duration, callback)关键帧动画
  • this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画,示例:
    //this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画this.animate(‘.avatar‘, [{ borderRadius: ‘0‘, borderColor: ‘red‘, transform: ‘scale(1) translateY(-25px)‘, offset: 0,//offset关键帧的偏移,范围【0,1】标识开始和结束帧}, { borderRadius: ‘25%‘, borderColor: ‘green‘, transform: ‘scale(.65) translateY(-25px)‘, offset: .4,}, { borderRadius: ‘50%‘, borderColor: ‘blue‘, transform: `scale(.3) translateY(-20px)`, offset: 1}], 2000, { scrollSource: ‘#scroller‘,//滚动元素 timeRange: 2000,//时间 startScrollOffset: 0,//开始滚动动画的位置 endScrollOffset: 85,//结束滚动动画的位置})

相关文章