如何在圖片上層放一個小圖標?
-
圖片上面放一個小圖標,這在iOS中最簡單的樣式,CSS中卻費了我一番功夫。
要實現的效果如下:
收藏頁面 還是繼續使用上次的模板,在大圖片上添加一個小圖標。上次模板的樣式代碼在這里《小程序學習筆記3-模板template、列表和頁面傳值》。現在要在這個模板的基礎上添加一顆紅色的小心心,正好之前用sketch畫過,就導出了我自己畫的??,放到項目路徑下。
在.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>
- 修改樣式
.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;
}
- 這樣就實現上面的效果了。在放圖標的過程中還是因為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調整樣式
要實現的效果如下圖:
- 先分解頁面,分為"小區"、“地圖”、“路線”三部分,“小區”和地圖部分使用weui的
list
列表樣式weui-cell
。地圖部分使用小程序官方提供的<map>
組件。 - 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;
}
-
寫好后編譯一下,效果如圖:
線.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> 元素。 |
-
再編譯一下,線已經去掉了image.png
PS:使用<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
組件使用的經緯度是火星坐標系,我找了個在線轉換工具,可以將百度坐標系轉換成火星坐標系。真正開發的時候應該是用不到的。