推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序-简单出售商品示例
发布时间:2020-12-27
首先打开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
