北京做网站海宇勇创厦门seo外包平台

张

张建站

2026/5/6 6:08:14

10分钟阅读

北京做网站海宇勇创,厦门seo外包平台,腾讯云可视化wordpress,登录wordpress显示403MENU序言HtmlJavaScript代码注解1、Html2、JavaScript序言最近在写原生微信小程序项目时候#xff0c;遇到全向#xff08;左右上下#xff09;滑动更新内容模块#xff0c;类似于小说的分页功能#xff0c;页面布局简单。关于文章的css不在此文章中展示#xff0c;因为…MENU序言HtmlJavaScript代码注解1、Html2、JavaScript序言最近在写原生微信小程序项目时候遇到全向左右上下滑动更新内容模块类似于小说的分页功能页面布局简单。关于文章的css不在此文章中展示因为使用了公共的自定义类名所以通过类名大概就能推敲出css对应的属性及值。Htmlviewclassdis_c_cc width_100_100 height_100_bindtouchstartslideStartbindtouchendslideEndviewclasswidth_100_100 height_680 dis_c_sb padding_26 shadow_0_8_6_10_9A radius_16viewviewclassfont_weight_700{{info.title}}/viewviewclassmargin_t_16viewclasstext_index_2emwx:for{{info.content}}wx:keyid{{item}}/view/view/viewviewclassmargin_t_36 dis_r_sb text_align_right border_t_999viewtext第/texttextclassfont_weight_700{{currentPage1}}/texttext页/text/viewviewtext共/texttextclassfont_weight_700{{listLen}}/texttext页/text/view/view/view/viewJavaScriptlet{// 数据列表objList,// JSON.stringify 克隆method_clone,// 随机重组method_randomRecombination}getApp();Page({/** * 页面的初始数据 */data:{list:[],listLen:0,info:{},currentPage:0,startX:undefined,startY:undefined},// 滑动结束slideEnd({changedTouches:{[0]:{clientX,clientY}}}){letselfthis,selfDataself.data,listselfData.list,listLenlist.length,currentPageselfData.currentPage,startXselfData.startX,startYselfData.startY,endXparseInt(clientX),endYparseInt(clientY),_XendX-startX,_YstartY-endY;currentPage_Y-_X0?currentPage1:currentPage-1;if(currentPage0)returncurrentPage0;if(currentPagelistLen)returncurrentPagelistLen-1;self.setData({currentPage,info:list[currentPage]});},// 开始滑动slideStart({changedTouches:{[0]:{clientX,clientY}}}){clientXparseInt(clientX);clientYparseInt(clientY);this.setData({startX:clientX,startY:clientY});},// 初始化init(){letlistobjList.tabBar_E;listmethod_clone(list);listmethod_randomRecombination(list);this.setData({list,listLen:list.length,info:list[0]});},/** * 生命周期函数--监听页面加载 */onLoad(options){this.init();}})代码注解1、HtmlHTML部分使用卡片的形式布局。顶部分别是标题和内容使用上下的布局模式。底部存放当前页码和总页数使用左右布局模式。2、JavaScript第一步在.js文件顶部引入三个数据变量分别是对象列表objList、克隆函数method_clone和随机重组函数method_randomRecombination。第二步在data中定义六个变量分别是list源数据listLen源数据长度也就是总页数info当前数据对象currentPage当前页不过这个值在渲染时需要进行加1操作startX开始触摸的X轴startY开始触摸的Y轴。第三步定义名为init的函数进行初始化操作。函数第一行获取数据第二行克隆数据第三行随机重组数据最后把数据列表、列表长度和列表第一项赋值到data对应的变量中。第四步定义名为slideStart函数用来记录开始触摸的坐标值。通过解构获取对应坐标因为获取到的坐标有小数点所以通过parseInt去除小数点只保留整数部分这一步不是必要操作只是个人习惯。最后把坐标值放到data中的startX和startY变量。第五步定义名为slideEnd的函数这是最终实现全向滑动的函数。在函数顶部定义相关变量需要注意的是_Y变量不是结束的Y坐标减去开始的Y坐标当手势向上滑动时得到的是一个负值向下滑动时得到一个正值而页面效果是向上滑需要的是切换下一页。_Y - _X会得到一个总数值如果大于0表示切换至下一页。如果小于0表示切换至上一页。if (currentPage 0) return currentPage 0;如果currentPage的值小于0那么终止程序继续往下运行并且把currentPage的值赋为0。if (currentPage listLen) return currentPage listLen - 1;如果currentPage等于源数据长度那么终止程序继续往下运行并且把currentPage的值赋为源数据长度减1。如果以上两个判断都不进入那么就正常赋值切换即可。