uniapp开发微信小程序-4.页面跳转与横向滑动

本篇文章主要是想记录一下横向滑动功能，备忘的同时给大家做个分享。
但既然是初级分享系列文章，为了方便新手朋友的上手工作，还是在此之前说一下页面跳转的功能。
两个功能完全没有关系，大家看的时候没必要做关联。

一、页面跳转

页面跳转的方法非常简单，就是绑定一个点击方法，使用跳转接口即可：

<view @click="tiaozhuan()"></view>

tiaozhuan() {uni.navigateTo({url: 'xxx'})
}

注意两点：
1.跳转路径的准确性。
2.tabbar页面不可跳转（以我的为例，之前文章中设置的首页、活动、对接、我的这四个页面跳转无效）。
试一下：
新建一个页面，就当是文章内容页

然后在首页，给第一个动态进行跳转绑定：

然后编辑这个方法，保存后点击动态窗口，测试，没问题：

很简单，过。

二、横向滑动

就是这个效果：

页面在展示内容时，如果都是纵向排列会拉的很长，用户使用时很难发现下边的内容，为了避免这个问题，又尽量多地展现内容，用横向滑动的方法可以做到鱼与熊掌兼得的目的。

直接上代码吧，我也没什么多说的，就是使用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;
}

scroll(e){// console.log(e)// 这里可以写一些监听动作，在滑动的时候触发
}

三、总结

今天时间有点紧，同时内容也没有过多需要讲解的，这几天继续往下写，有什么常用或者复杂的功能继续分享给大家。
待页面完成，我们就开始着手连接外部数据库和调用数据接口。

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————

uniapp开发微信小程序-4.页面跳转与横向滑动相关推荐

基于uniapp开发微信小程序登陆页面一
此微信登陆页面是参考uniapp开发文档 uniapp一键登录和button组件中的@getphonenumber方法代码展示 <template><view class=&quo ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题某个表单页面有时需要跳转另一个页面查询数据但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
uniapp开发微信小程序，引用微信物理查询插件
使用uniapp开发微信小程序,引用微信官方提供的物流查询插件开发时遇到的问题: 项目内有两个分包都有使用物流查询插件,所以插件的引入只能放在manifest.json>mp-weixin里面 ...

uniapp开发微信小程序-4.页面跳转与横向滑动

uniapp开发微信小程序-4.页面跳转与横向滑动

一、页面跳转

二、横向滑动

三、总结

uniapp开发微信小程序-4.页面跳转与横向滑动相关推荐

最新文章

热门文章