微信小程序開發(fā)問答《六十一》 輪播圖修改小點點 & 使用字體圖標(biāo) ...
1、
微信小程序 輪播圖 修改小點點
<pre name="code" class="html">.swiper-box .wx-swiper-dot{
display: inline-flex;
justify-content:space-between;
border-radius: 50%;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: gray;
border-radius: 50%;
}
.swiper-box .wx-swiper-dot-active::before{
background:white;
border-radius: 50%;
}pre><br>
<swiper class="swiper-box" indicator-dots="true" interval="3000" duration="600" style="height:500px;" current="{{num}}" > <block wx:for="{{imgs}}"> <swiper-item> <image class="slide-image" src="{{item.src}}" width="100%">image>
swiper-item> block>swiper>
<pre>pre>
<br>
2、微信小程序-使用字體圖標(biāo) 使用字體圖標(biāo)，教程 1.阿里font下載了后，解壓，打開iconfont.css，復(fù)制內(nèi)容，粘貼到wxss文件中 2. https://transfonter.org/在這個網(wǎng)站上將，下載的iconfont.ttf轉(zhuǎn)換，
后下載，拷貝stylesheet.css中的內(nèi)容，替換@font-face
在wxml中粘貼 3.然后就可以運行，看到圖標(biāo)顯示了
在開發(fā)工具調(diào)試的時候能正常顯示，如下圖：
但是在真機調(diào)試的時候卻是全白的，如下圖：
代碼如下：
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "rgb(239,129,55)",
"navigationBarTitleText": "投票",
"navigationBarTextStyle": "#000"
},
index.json下的設(shè)置
{
"navigationBarTitleText": "投票",
"navigationBarBackgroundColor": "rgb(239,129,55)"
}
沒有一個起作用。沮喪
第二個問題：
但是一到真機上就變成下圖：
代碼：
"tabBar": {
"selectedColor": "rgb(255,40,8)",
"backgroundColor":"#ccc",
"color":"#000",
"list": [
{
"pagePath": "pages/index/index",
"text": "投票",
"iconPath":"image/Rank.png",
"selectedIconPath":"image/Money.png"
},
{
"pagePath": "pages/money/money",
"text": "錢包",
"iconPath": "image/Money.png",
"selectedIconPath": "image/Rank.png"
}
]
}
找不到原因～～求助～～～真的沒有人知道為什么咩～～吼苦腦 答：鐺鐺鐺，果然坑都要自己試出來。
"navigationBarBackgroundColor": "rgb(239,129,55)" 之前的顏色設(shè)置用的是rgb的形式，改成十六進制顏色碼后就好了
第一個坑和第二個坑都是一個錯誤，就是設(shè)置字的顏色上出錯了所以所有對導(dǎo)航條和tabbar的樣式設(shè)置都出現(xiàn)了問題。
<view data-id="1">1view> <view data-id="2">2view> 如果id = 1 ，獲取當(dāng)前元素的offsetLeft值，ID是其他頁面?zhèn)鬟^來的 答： ①小程序從1.4.0開始支持WXML節(jié)點信息API，不過不支持根據(jù)非id和class外屬性匹配，文檔描述如下： selector類似于CSS的選擇器，但僅支持下列語法。 ID選擇器：#the-id class選擇器（可以連續(xù)指定多個）：.a-class.another-class 子元素選擇器：.the-parent > #the-child.a-class 多選擇器的并集：#a-node, .some-other-nodes 所以，你可以通過把這個ID放入id屬性或者class屬性上，然后查出來后獲取offsetLeft信息等。 具體文檔參見：https://mp.weixin.qq.com/debug/wxadoc/dev/api/wxml-nodes-info.html
② 通過bindtap綁定一個事件 通過事件的event參數(shù)獲取id event.currentTarget.dataset.id 判斷這個id值是否等于1就可以了。 |
