微信小程序开发问答《六十一》轮播图修改小点点 & 使用字体图标 ...

发布：2018-04-23 11:46浏览：次来源：网络作者：cola

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转换，

微信小程序开发问答《六十一》轮播图修改小点点 & 使用字体图标 ...(图1)

后下载，拷贝stylesheet.css中的内容，替换@font-face

在wxml中粘贴 111

3.然后就可以运行，看到图标显示了

3、微信小程序真机测试时导航条样式获取失败？

在开发工具调试的时候能正常显示，如下图：

但是在真机调试的时候却是全白的，如下图：

代码如下：
app.json下的设置

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "rgb(239,129,55)",
    "navigationBarTitleText": "投票",
    "navigationBarTextStyle": "#000"
  },

index.json下的设置

{
  "navigationBarTitleText": "投票",
  "navigationBarBackgroundColor": "rgb(239,129,55)"
}

没有一个起作用。沮丧

第二个问题：
底部的tabBar在开发工具调试的时候能正常显示，如下图：

但是一到真机上就变成下图：

代码：

"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)"
"selectedColor": "rgb(255,40,8)"

之前的颜色设置用的是rgb的形式，改成十六进制颜色码后就好了

第一个坑和第二个坑都是一个错误，就是设置字的颜色上出错了所以所有对导航条和tabbar的样式设置都出现了问题。
还有一点需要注意的是导航栏标题颜色，仅支持 black/white

4、微信小程序怎么通过data值找到元素

<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就可以了。

上一篇：微信小程序movable-view移动图片和双指缩放

下一篇：微信小程序开发问答《六十四》赋值undefined &

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。