用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2017-8-9 00:08

1、微信小程序 轮播图 修改小点点 2、微信小程序-使用字体图标 3、微信小程序真机测试时导航条样式获取失败? 4、微信小程序 怎么通过data值找到元素 ...

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中粘贴        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,不过不支持根据非idclass外属性匹配,文档描述如下:

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


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读