🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
一、页面跳转 页面跳转的方法非常简单,就是绑定一个点击方法,使用跳转接口即可: ``` <view @click="tiaozhuan()"></view> ``` ``` tiaozhuan() { uni.navigateTo({ url: 'xxx' }) } ``` 注意两点: 1.跳转路径的准确性。 2.tabbar页面不可跳转(以我的为例,之前文章中设置的首页、活动、对接、我的 这四个页面跳转无效)。 试一下: 新建一个页面,就当是文章内容页 ![](https://img.kancloud.cn/57/9a/579aba066e1665d9c490e4148a5e27b5_1050x628.png) 然后在首页,给第一个动态进行跳转绑定: ![](https://img.kancloud.cn/df/62/df62b1c35fcabf04ca1cddb435d90ddc_1618x764.png) 然后编辑这个方法,保存后点击动态窗口,测试,没问题: ![](https://img.kancloud.cn/e7/da/e7dac51d8458f2349f50fa72e5806e24_1300x529.png) 很简单,过。 二、横向滑动 就是这个效果: ![](https://img.kancloud.cn/7f/37/7f37dd7b5052855d250e1eda757f61e5_401x802.png) 页面在展示内容时,如果都是纵向排列会拉的很长,用户使用时很难发现下边的内容,为了避免这个问题,又尽量多地展现内容,用横向滑动的方法可以做到鱼与熊掌兼得的目的。 直接上代码吧,我也没什么多说的,就是使用scroll-x。 html ``` <scroll-view scroll-x="true" @scroll="scroll" style="overflow:hidden;white-space:nowrap;"> <view class="scroll-view_H"> <view class="zhuanjia"> <image class="pic" mode="aspectFill" src="https://6266-bf-design-zv1tw-1302530198.tcb.qcloud.la/%E6%B5%8B%E8%AF%95%E7%94%A8%E5%9B%BE/jiabin2.png?sign=f44099896f1fbbcc54becb1930d3dbb5&t=1650266596"></image> <view class="inform"> <view class="name">姓名</view> <view class="position">专家的职务</view> </view> </view> // zhuanjia 这一堆复制四份 </view> </scroll-view> ``` css ``` .scroll-view_H{ width: 200%; display: flex; flex-wrap: nowrap; } ``` js ``` scroll(e){ // console.log(e) // 这里可以写一些监听动作,在滑动的时候触发 } ``` 三、总结 今天时间有点紧,同时内容也没有过多需要讲解的,这几天继续往下写,有什么常用或者复杂的功能继续分享给大家。 待页面完成,我们就开始着手连接外部数据库和调用数据接口。