开发微信-4。页面跳和水平滑动

本文主要想记录水平滑动功能并在记下笔记时与您共享。

但是，由于这是主要共享的一系列文章，为了促进新手的工作，我想在此之前谈论页面跳跃的功能。

这两个函数彼此无关，因此当您观看时无需建立连接。

1。页跳

页面跳跃方法非常简单，它是绑定单击方法并使用跳跃接口：

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

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

注意两个点：

1。跳跃的准确性。

2。无法重定向页面（以我的为例，主页，活动，对接以及我在上一篇文章中设置的四个页面无效）。

尝试：

创建一个新页面，只需将其视为文章内容页面

然后在主页上，跳到第一个动态：

然后编辑此方法，保存并单击动态窗口进行测试，没问题：

非常简单，通过。

2。水平滑动

这就是效果：

在页面上显示内容时，如果垂直排列，它将很长，并且用户在使用它时很难找到下面的内容。为了避免此问题，我们应该显示尽可能多的内容。使用水平滑动方法可以实现鱼类和熊。双手的目的。

只是上传代码，我说的不是太多，只使用-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) // 这里可以写一些监听动作，在滑动的时候触发 }

3。摘要

今天的时间有点紧，没有太多内容可以解释。这些天我将继续写下。我将继续与您分享任何常见或复杂的功能。

页面完成后，我们开始连接到外部数据库并调用数据接口。

有关设计和功能的更多学习经验，您也可以在我的官方帐户上查看它！

————