程序实现类似于苹果 AssistiveTouch 功能(附代码

网友投稿 324 2024-06-06

本篇文章给大家带来的内容是关于小程序实现类似于苹果assistivetouch功能(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

小程序实现类似于苹果 AssistiveTouch 功能(附代码)

一、首先我先介绍一下,我们要做一个什么样的项目功能

项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可以跟随着我的滑动而上下滚动,当停止滑动的时候,音频动图停靠在手机的左侧或者右侧,而当前下的页面是可以上下滚动的,功能介绍到此为止,下面我们说一下思路。    

二、我们做这个功能,第二步就是要想思路

思路就是,利用微信中的滑动事件,外加控制css样式,来完成这个功能。

三、这是项目的ui图,废话不多说,直接撸代码。

项目样图

四、index.wxml、index.wxss、index.js页面代码

*index.wxml页面*

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

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!-- 搜索 -->

<view>

<view>

<image></image>

<view>开心奶奶</view>

</view>

</view>

<!-- 音频分类 -->

<view>

<!-- 轮播图 -->

<view>

<swiper>

<!-- <block wx:for="{{}}" wx:key=""> -->

<swiper-item>

<view>

<audio></audio>

<view>

<button>

<image></image>

</button>

<button>

<image></image>

</button>

</view>

<view>

<image></image>

</view>

<view>

<button>

<image></image>

</button>

<button>

<image></image>

</button>

</view>

<view>开心奶奶——小小探险家</view>

</view>

</swiper-item>

<swiper-item>

<view>

<audio></audio>

<view>

<button>

<image></image>

</button>

<button>

<image></image>

</button>

</view>

<view>

<image></image>

</view>

<view>

<button>

<image></image>

</button>

<button>

<image></image>

</button>

</view>

<view>开心奶奶——小小探险家</view>

</view>

</swiper-item>

<!-- </block> -->

</swiper>

</view>

----------

&gt; 重点!!!!

<!-- 音频动图 -->

<view>

<view>

<image></image>

<image></image>

</view>

</view>

----------

<!-- 分类 -->

<view>

<view>

<image></image>

<view>推荐故事</view>

</view>

<view>

<image></image>

<view>男孩</view>

</view>

<view>

<image></image>

<view>女孩</view>

</view>

</view>

</view>

<!-- 儿童故事 -->

<view>

<view>

<view>

<view>

<image></image>

<image></image>

</view>

<view>童话故事里的小智慧</view>

<view>小智慧,大智慧</view>

</view>

</view>

<view>

<view>

<view>

<image></image>

<!-- <image class=&#39;story_li_img2&#39; src=&#39;../../img/pay_icon.png&#39;></image> -->

</view>

<view>童话故事里的小智慧</view>

               &nb

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序学习之浅析 image 标签与 swiper 组件
下一篇:小程序审核不通过且页面数据不完整的应对措施
相关文章

 发表评论

暂时没有评论,来抢沙发吧~