微信小程序开发问答《六十一》 轮播图修改小点点 & 使用字体图标 ...
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、微信小程序-使用字体图标 使用字体图标，教程 1.阿里font下载了后，解压，打开iconfont.css，复制内容，粘贴到wxss文件中 2. https://transfonter.org/在这个网站上将，下载的iconfont.ttf转换，
后下载，拷贝stylesheet.css中的内容，替换@font-face
在wxml中粘贴 3.然后就可以运行，看到图标显示了
在开发工具调试的时候能正常显示，如下图：
但是在真机调试的时候却是全白的，如下图：
代码如下：
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "rgb(239,129,55)",
"navigationBarTitleText": "投票",
"navigationBarTextStyle": "#000"
},
index.json下的设置
{
"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)" 之前的颜色设置用的是rgb的形式，改成十六进制颜色码后就好了
第一个坑和第二个坑都是一个错误，就是设置字的颜色上出错了所以所有对导航条和tabbar的样式设置都出现了问题。
<view data-id="1">1view> <view data-id="2">2view> 如果id = 1 ，获取当前元素的offsetLeft值，ID是其他页面传过来的 答： ①小程序从1.4.0开始支持WXML节点信息API，不过不支持根据非id和class外属性匹配，文档描述如下： selector类似于CSS的选择器，但仅支持下列语法。 ID选择器：#the-id class选择器（可以连续指定多个）：.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参数获取id event.currentTarget.dataset.id 判断这个id值是否等于1就可以了。 |
