小程序學習筆記4-weui實戰、WXSS樣式和地圖map

如何在圖片上層放一個小圖標?

  1. 圖片上面放一個小圖標,這在iOS中最簡單的樣式,CSS中卻費了我一番功夫。
    要實現的效果如下:


    收藏頁面
  2. 還是繼續使用上次的模板,在大圖片上添加一個小圖標。上次模板的樣式代碼在這里《小程序學習筆記3-模板template、列表和頁面傳值》。現在要在這個模板的基礎上添加一顆紅色的小心心,正好之前用sketch畫過,就導出了我自己畫的??,放到項目路徑下。

  3. 在.wxml中添加代碼

  <view class='houseItem-img'>
      <!-- 大圖片 -->
      <image class='image-house' src='{{image}}' mode="aspectFill"></image>
      <!-- 小圖標 -->
      <image class='image-collect' src='../../../images/mine/mine_heart.png' ></image>
  </view>
  1. 修改樣式
.houseItem-img {
  width: 100%;
  position: relative;
}
.houseItem-img .image-house {
  width: 100%;
  display: block;
}
.houseItem-img .image-collect {
  position: absolute;
  right:10px;
  top:10px;
  width: 24px;
  height: 22px;
}
  1. 這樣就實現上面的效果了。在放圖標的過程中還是因為CSS不熟走了很多彎路,最后用百度來的方法做到了。
    方法介紹如下:

這種效果單純的圖片不好實現,假設把它們放進一個div的容器里面。
<div>
<img src="1.jpg">
<img class="pos" src="2.jpg">
<div>
CSS代碼為:
div{ position: relative; width: 200px; height: 200px; }
img{ display: block; }
.pos{ position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
原理是用到了父元素相對定位時,子元素絕對定位是相對于父元素來定位,設置top和left均為50%,然后偏移寬和高的一半,就可以實現垂直居中的效果。不只對于圖片,對于任何元素都能實現此效果。
給img添加display: block;是防止在IE6下圖片下方出現空白的BUG。

weui +css調整樣式

要實現的效果如下圖:


  1. 先分解頁面,分為"小區"、“地圖”、“路線”三部分,“小區”和地圖部分使用weuilist列表樣式weui-cell。地圖部分使用小程序官方提供的<map>組件。
  2. copy代碼后修改一下字體顏色和大小。
    .wxml中代碼如下:
<view class='page-section house-location' style='padding: 0;'>
      <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
        <view class='weui-cell__bd'>
          <text class="line-title">小區:</text>
          <text class="line-content">魏公村小區</text>
        </view>
        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
      </navigator>
      <map class='house-map' >
      </map>
      <navigator url="" class="weui-cell weui-cell_access loacation" hover-class="weui-cell_active" >
        <view class="weui-cell__hd">
          <image src="../../../images/home/house_station.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
          </view>
        <view class="weui-cell__bd">4號線 魏公村站 東北口</view>
        <view class="weui-cell__ft" style='color:#bebebe;font-size:12px;'>步行489米</view>
      </navigator>
    </view>

.wxss中調整樣式:

.line-title {
  color: #bebebe;
}
.line-content {
  color: #5c5c5c
}
map {
  width: 100%;
  height: 300rpx;
}
  1. 寫好后編譯一下,效果如圖:


    線.png

這時會發現,地圖下方有一條線,這是weui中weui-cell樣式設置的,但是這里我們不需要這條線,所以要想辦法去掉。
首先我想到的是直接將border-top去掉,如下修改代碼,發現完全沒有效果



然后我又仔細找這條線的來源,原來在這里:


頁面調試

:before對我這個小學生可能有點超綱,然后就學習一下,這是W3School中的介紹-CSS選擇器。看完之后明白了,原來是這樣。

| :before | p:before | 在每個 <p> 元素的內容之前插入內容。 |

怪不得我之前寫的樣式不好使,原來它是在元素之前插入的啊,這樣就好辦了,在.wxss中添加個樣式:

.house-location>.weui-cell:before {
  border-top:none; 
}  

順便學習一下>,也是在CSS選擇器學到的。

| element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素。 |

  1. 再編譯一下,線已經去掉了
    image.png

PS:使用<map>組件后,頁面調試就出問題,不知道是微信開發工具的問題還是我寫的問題,所以上面調試的時候我先將<map>注釋掉了。

這是使用<map>的調試頁面,根本不能調試了~

地圖map

上面例子中地圖只是簡單的展示了一下,沒有顯示正確的位置,沒有定位小圖標,微信官方文檔地圖非常清楚,根據官方文檔修改一下代碼,在地圖上添加定位小圖標
代碼修改如下:

<map id="map" longitude="116.320661" latitude="39.956692" scale="16"  markers="{{markers}}" bindmarkertap="markertap" ></map> 

.js data中添加代碼:

data: {
    markers: [{
      iconPath: "/images/home/mapLocation.png",
      id: 0,
      latitude: 39.956692,
      longitude: 116.320661,
      width: 16,
      height: 22
    }],
  },

編譯效果:


PS: map組件使用的經緯度是火星坐標系,我找了個在線轉換工具,可以將百度坐標系轉換成火星坐標系。真正開發的時候應該是用不到的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。