微信小程序-简单出售商品示例

来源：未知 浏览 138次 时间 2021-06-15 21:45

首先打开app.json修改如下{ "pages":, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle&q

微信小程序-简单出售商品示例

 

 

微信小程序-简单出售商品示例

 

首先打开app.json修改如下

{ "pages":[ "pages/index/index", "pages/search/search", "pages/publish/publish" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle":"white", "enablePullDownRefresh":true, "backgroundColor":"#ccc" } }

布局第一个界面,如图所示

代码如下,index.wxml

<view> <view class="mapArea"> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="10" controls="{{controls}}" bindcontroltap="handleControlTap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;"> </map> </view> <!-- <button bindtap="bindViewTap">tap</button> --> <view class="nav"> <view class="publish"><navigator url="../publish/publish">发布</navigator></view> <view class="search">搜索</view> </view> </view>

首先布局下方”发布”,”搜索”部分,index.wxss文件如下

.nav { height: 42px; width: 100%; position: absolute; /* top: 100%; */ bottom: 0px; display: flex; color: #fff; } .mapArea{ /* height: 500px; */ bottom: 42px; width: 100%; top: 0px; left: 0px; right: 0px; position: absolute; /* background-color: black; */ } .publish,.search{ text-align: center; line-height: 42px; height: 42px; flex: 1; /*占用1/2,当改成2时,则占用2/3*/ } /* 以下的内容可以整合到上方.publish,.search{}中 */ .publish { background-color: #ff9700; /* width: 50%; */ /* float: left; 当下方方块多了的时候就不好用了*/ } .search { text-align: center; line-height: 42px; /* width: 50%; */ background-color: #03bbd5; height: 42px; /* float: right; */ flex: 1; }

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

内容更新优化

首先打开app.json修改如下{ "pages":, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle&q

 

 

 

首先打开app.json修改如下

{ "pages":[ "pages/index/index", "pages/search/search", "pages/publish/publish" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle":"white", "enablePullDownRefresh":true, "backgroundColor":"#ccc" } }

布局第一个界面,如图所示

代码如下,index.wxml

<view> <view class="mapArea"> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="10" controls="{{controls}}" bindcontroltap="handleControlTap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;"> </map> </view> <!-- <button bindtap="bindViewTap">tap</button> --> <view class="nav"> <view class="publish"><navigator url="../publish/publish">发布</navigator></view> <view class="search">搜索</view> </view> </view>

首先布局下方”发布”,”搜索”部分,index.wxss文件如下

.nav { height: 42px; width: 100%; position: absolute; /* top: 100%; */ bottom: 0px; display: flex; color: #fff; } .mapArea{ /* height: 500px; */ bottom: 42px; width: 100%; top: 0px; left: 0px; right: 0px; position: absolute; /* background-color: black; */ } .publish,.search{ text-align: center; line-height: 42px; height: 42px; flex: 1; /*占用1/2,当改成2时,则占用2/3*/ } /* 以下的内容可以整合到上方.publish,.search{}中 */ .publish { background-color: #ff9700; /* width: 50%; */ /* float: left; 当下方方块多了的时候就不好用了*/ } .search { text-align: center; line-height: 42px; /* width: 50%; */ background-color: #03bbd5; height: 42px; /* float: right; */ flex: 1; }

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

标签： 42pxgtviewlt

上一篇: 曝微软《战争机器5》将在9月10日发布
下一篇: 微信小程序-滚动消息通知效果

热门文章

最新文章

QQ咨询