初始小程序(二)

172 阅读1分钟

总结几个今天在实战中遇到的小问题

1.如何在除了主页之外的界面改变导航栏的样式?

一般的,我们是在全局配置中更改:

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
    },

这样是改变主页的导航栏样式,那么如果要改变单独一个界面的呢?很简单,我们只需要把上面的内容写在相应的.json文件中即可。

2.如何实现轮播图?

微信小程序轮播图一般用swiper组件制作,在文档中是指:滑块视图容器,其属性如下:

1102354-20190403112534064-748045377.png

具体怎么使用呢?

我们先在.wxml文件中写入:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

.js文件中写下属性响应的值:

data: {
    current: 0,  //当前所在页面的 index

    indicatorDots: true, //显示面板指示点

    autoplay: true, //自动切换

    interval: 3000, //自动切换时间间隔

    duration: 800, //滑动动画时长

    circular: true, //采用衔接滑动

    imgUrls: [

      '1.jpg',

      '2.jpg',

      '3.jpg'

    ],

    links: [

      'xxx',

      'xxx',

      'xxx'

    ]

  },

一个基础的轮播图就靠swiper实现啦

值得注意的是,今天遇到一个小坑,swiperdisplay-multiple-items属性的最低版本是1.9.0,低于这个版本没办法兼容哦。

3.页面链接

navigator基本属性:

微信截图_20210409194535.png

值得一提的是:navigator-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色。