html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能).pdf...

微微信信小小程程序序搜搜索索框框样样式式并并实实现现跳跳转转到到搜搜索索页页面面(小小程程序序搜搜索索功功能能)

目目录录

一:搜索框功能实现

1.在首页做一个搜索框的样式并实现跳转到搜索页面

2.搜索页面实现搜索功能

上效果 :

一一:搜搜索索框框功功能能实实现现

1.在在首首页页做做一一个个搜搜索索框框的的样样式式并并实实现现跳跳转转到到搜搜索索页页面面

1

2

3

4

5

6

7

8 搜索

9

1 .search{

2 width: 80%;

3 }

4 .search_arr {

5 border: 1px solid #d0d0d0;

6 border-radi s: 10rpx;

7 margin-left: 20rpx;

8 }

9 .search_arr inp t{

10 margin-left: 60rpx;

11 height: 60rpx;

12 border-radi s: 5px;

13 }

14 .bc_text {

15 line-height: 68rpx;

16 height: 68rpx;

17 margin-top: 34rpx;

18 }

19

20 .so s o {

21 margin-left: 15rpx;

22 width: 15%;

23 line-height: 150%;

24 text-align: center;

25 border: 1px solid #d0d0d0;

26 border-radi s: 10rpx;

27 }

28 .page_row{

29 display: flex;

30 flex-direction: row

31 }

32 .searchcion {

33 margin: 10rpx 10rpx 10rpx 10rpx;

34 position: absol te;

35 left:25rpx;

36 z-index: 2;

37 width: 20px;

38 height: 20px;

39 text-align: center;

40 }

j s.点击跳转到搜索的页面

1 s o: function (e) {

2 wx.navigateTo({

3 rl: '../search/search',

4 })

5 },