微信小程序如何使用scroll-into-view中跳转到指定位置

微信小程序中scroll-into-view跳转到指定位置是这样使用的：

1、首先第一步，打开微信开发者工具。

2、其次第二步，打开wxml文件，然后在文件里先新建一个scroll-view的标签即可。

3、再次第三步，设置这个scroll-into-view滚动的方向设置为x轴，与此同时设置scroll-into-view的值，这个值就是子元素中的id，表示滚动到哪一个元素历模简，如下图所示。

4、接下来就是设置子元素，先新建一个view的子元素，然后设置class和id，并且多设置几个view标签，以便观察效果。

5、最后一肢裤步，点击打开模拟器，在下面我们码历就可以看到滚动的元素，接着就按照我们之前设置的显示就行了。

在微信小程序开发过程中，我们会经常使用到scroll-view组件，有时基弯我们要在scroll-view中水平显示列表，类似这样：

但是当我们设置了scroll-view的flex-direction:row等属性时，会发现没有用，列表依然垂直显示，像这样：

主要是因为display:flex等属性对于scroll-view来说是没有用的，此时我们只需要设置子试图的属性display: inline-block即可，不需要设置scroll-view的flex属性。

但是当我们设置完成后可能会出现一下情况：

会发现列表好像没有对齐，有两个子试图错位了，接下来我毕锋拍们可以通过设置子属性vertical-align:top来解决手羡，最后会得到我们想要的效果。

首先把那个文字框view设置一个哪唯固定的高度（比如3行），overflow属性设为hidden，position属性设为relative。

“...”和“展开”放在同一个绝对定位（position为absolute）的view内，放在文字框内，定位在右下角，文字大小与文字框一致，这样当这个层显示时，就自然覆盖了文陵裤字框右下角，形成“... 展开”的效果。

然后在js中计算文字简介的字数，再根据文字框的字体宽度计算出总长度，除以文字框的宽度，如果计算结果大于3，就说明溢出了。这时可以通过setData通知wxml显示“... 展开”。

给“... 展开”绑定tap事件，点击后文字框的高度变为auto，这样溢出的部分就重新出现了李汪培，当然这时候要再次把“... 展开”隐藏。

---