如何让微信小程序中间的图标也跟着图上下滑动

让微信小程序中间的图标也跟着图上下滑动方法如下：

1、在WXML文件中创建一个固定高度的区域，并设置其为可滚动的。

2、在该区域内添加两个元素：一个用于显示上下滑动的图片，另一个用于显示图标。

3、在CSS样式文件中，对这两个元素分别设置相应的位置和样式。其中，上下滑动的图片需要设置position：absolute。top：0。left：0。width：100%。height：auto。z-index：-1。等属性，使其能够覆盖住整个区域并与图标区分开来。而图标元素则需要设置position：relative。等属性来保证其相对于父元素的位置不变。

4、使用JavaScript监听区域的滚动事件，获取当前滚动位置，并将其赋值给图标元素的top属性，以实现图标随着滚动上下移动。

步骤1：首先我们打开微信开发者工具。

步骤2：然后打开一个wxml文件。

步骤3：在wxml文件中使用image标签插入一张图片。

步骤4：写一段文字，跟图片一起同时放在父元素main-memu里面。

步骤5：然后打开wxss文件。

步骤6：在wxss文件里面，为图片和文本的父元素main-memu设置宽和高。

步骤7：设置完宽和高之后，通过text-align: center让文本居中显示！

步骤8：打开模拟器查看效果！

1、把要改变样式添加到相应js文件的全局变量中。

2、将变量绑定到view中。

3、在view中添加事件。

4、在相应js文件中添加该自定义方法changeColor， function，e，this.setData，color ， #fff。

1/微信小程序有个属性hover-class='active'，是指当点击列表元素时当按下鼠标左键会显示active样式，但鼠标离开样式就会复原，可以参考以下解决方案，直接上代码：

2/核心点:class=”taga-item {{dateCurrent==item.id?'active-tag':”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id.

---