小程序在同个界面进行step

Posted on | In

前言

许久没写博客了，今天正好周六，抽时间写一篇关于步骤操作的一个界面，这个是一个纯手写层叠样式表的一个小step。当初我准备用swiper，然后每个步骤放在一个swiper-item里边的，但是这里会有个bug。swiper的高度是固定的，是根据父元素固定的，而不能通过子元素的增加而增加。于是准备秀一秀，手写一个类似swiper的step。

⚠️ 完整代码我用react写的，可能没法参考，这里提供思路

效果图

老规矩，先上一个效果图

image

html

这里我把三个step页面写成了组件的形式，这里就调用这个组件就行了，但是这个组件外层的嵌套一个view，这个view来控制这个组件的显示与隐藏

由于这里的组件在同个界面，所以我们在每一个外层view得添加一个相对于浏览器的绝对定位（position: fixed），然后呢我们在JavaScript里边控制他的step的值，判断当前是哪一个组件。

该显示的组件加上一个class：show（这里有show-1 和 show-2），待会再解释这两个class类的样式差别。非当前组件加上一个class：hide。

1
2
3
4
5
6
7
8
9
10
11
12
13
<View className="ServiceItemPage">
  <View className={['step-1', this.state.step == 0 ? this.state.show : this.state.hide]}><ServiceItemA /></View>
  <View className={['step-2', this.state.step == 1 ? this.state.show : this.state.hide]}><ServiceItemB /></View>
  <View className={['step-3', this.state.step == 2 ? this.state.show : this.state.hide]}><ServiceItemC /></View>
  <View className="step">
    <View className="prev" onClick={this.prev}>
      <Text>上一步</Text>
    </View>
    <View className="next" onClick={this.next}>
      <Text>下一步</Text>
    </View>
  </View>
</View>

JavaScript

当我们点击上一步或下一步的时候触发一个方法，改变step的值，并且改变show或hide的样式（show-1、show-2、hide-1、hide-2）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
prev() {
  if (this.state.step > 0) {
    this.setState({
      step: this.state.step - 1,
      show: 'show-2',
      hide: 'hide-2'
    })
    console.log(this.state.step)
  } else {
    return
  }
}

next() {
  if (this.state.step < 2) {
    this.setState({
      step: this.state.step + 1,
      show: 'show-1',
      hide: 'hide-1'
    })
    console.log(this.state.step)
  } else {
    Taro.redirectTo({
      url: '../serviceItemSuccess/serviceItemSuccessPage'
    })
  }
}

css

show-1、hide-1 是当点击下一步时，下个页面从右向左淡入，当前页面从右向左淡出。

show-2、hide-2 是当点击上一步时，上个页面从左向右淡入，当前页面从左向右淡出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.step-1,
.step-2,
.step-3 {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
}

.hide-1 {
  opacity: 0;
  z-index: -1;
  animation: .8s hide-1 ease;
  transition: all .8s ease;
}

.show-1 {
  opacity: 1;
  z-index: 998;
  animation: .8s show-1 ease;
  transition: all .8s ease;
}


.hide-2 {
  opacity: 0;
  z-index: -1;
  animation: .8s hide-2 ease;
  transition: all .8s ease;
}

.show-2 {
  opacity: 1;
  z-index: 998;
  animation: .8s show-2 ease;
  transition: all .8s ease;
}

@keyframes show-1 {
  0% {
    transform: translateX(100%)
  }

  100% {
    transform: translateX(0)
  }
}

@keyframes hide-1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%)
  }
}

@keyframes show-2 {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(0)
  }
}

@keyframes hide-2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%)
  }
}

这样的话，我们就可以实现纯手写step的界面了。

wait.. 再想想，如果增加一个滑动监听的话，是不是就像一个swiper了呢？有空我回去玩玩。

Over