├── app.js ├── fullpage.GIF ├── README.md ├── app.json ├── app.wxss ├── .gitattributes ├── .gitignore └── pages └── fullpage ├── fullpage.wxss ├── fullpage.js └── fullpage.wxml /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | }) -------------------------------------------------------------------------------- /fullpage.GIF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rongj/wechatapp-fullpage-scroll/HEAD/fullpage.GIF -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wechatapp-fullpage-scroll 2 | ![image](https://github.com/rongj/wechaapp-fullpage-scroll/blob/master/fullpage.GIF) 3 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/fullpage/fullpage" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"white", 7 | "navigationBarBackgroundColor": "#FF9933", 8 | "navigationBarTitleText": "全屏滚动", 9 | "navigationBarTextStyle": "white" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | height: 100%; 4 | background: #fff; 5 | color: #333; 6 | display: flex; 7 | flex-direction: column; 8 | font: normal 30rpx/1.68 -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif; 9 | } 10 | .container { 11 | flex: 1; 12 | display: flex; 13 | flex-direction: column; 14 | box-sizing: border-box; 15 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /pages/fullpage/fullpage.wxss: -------------------------------------------------------------------------------- 1 | .container-fill{ 2 | height: 100%; 3 | overflow: hidden; 4 | } 5 | .scroll-fullpage{ 6 | height: 100%; 7 | transition: all 0.3s; 8 | } 9 | .section{ 10 | height: 100%; 11 | } 12 | .section-maintitle{ 13 | display: block; 14 | text-align: center; 15 | font-size: 50rpx; 16 | color: #fff; 17 | font-weight: bold; 18 | letter-spacing: 10rpx; 19 | padding-top: 140rpx; 20 | } 21 | .section-subtitle{ 22 | display: block; 23 | text-align: center; 24 | font-size: 40rpx; 25 | color: #fff; 26 | font-weight: bold; 27 | letter-spacing: 10rpx; 28 | } 29 | .active .section-maintitle, 30 | .active .section-subtitle{ 31 | animation: mymove 0.8s; 32 | } 33 | @keyframes mymove{ 34 | from { 35 | transform: translateY(-400rpx) scale(0.5) rotateY(90deg); 36 | } 37 | to { 38 | transform: translateY(0) scale(1) rotateY(0); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /pages/fullpage/fullpage.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | scrollindex:0, //当前页面的索引值 4 | totalnum:5, //总共页面数 5 | starty:0, //开始的位置x 6 | endy:0, //结束的位置y 7 | critical: 100, //触发翻页的临界值 8 | margintop:0, //滑动下拉距离 9 | }, 10 | onLoad: function () { 11 | }, 12 | scrollTouchstart:function(e){ 13 | let py = e.touches[0].pageY; 14 | this.setData({ 15 | starty: py 16 | }) 17 | }, 18 | scrollTouchmove:function(e){ 19 | let py = e.touches[0].pageY; 20 | let d = this.data; 21 | this.setData({ 22 | endy: py, 23 | }) 24 | if(py-d.starty<100 && py-d.starty>-100){ 25 | this.setData({ 26 | margintop: py - d.starty 27 | }) 28 | } 29 | }, 30 | scrollTouchend:function(e){ 31 | let d = this.data; 32 | if(d.endy-d.starty >100 && d.scrollindex>0){ 33 | this.setData({ 34 | scrollindex: d.scrollindex-1 35 | }) 36 | }else if(d.endy-d.starty <-100 && d.scrollindex 2 | 3 | 4 | 无缝对接双创服务1 5 | 构筑“云上孵化基地”1 6 | 7 | 8 | 无缝对接双创服务2 9 | 构筑“云上孵化基地”2 10 | 11 | 12 | 无缝对接双创服务3 13 | 构筑“云上孵化基地”3 14 | 15 | 16 | 无缝对接双创服务4 17 | 构筑“云上孵化基地”4 18 | 19 | 20 | 无缝对接双创服5 21 | 构筑“云上孵化基地”5 22 | 23 | 24 | --------------------------------------------------------------------------------