总结几个今天在实战中遇到的小问题
1.如何在除了主页之外的界面改变导航栏的样式?
一般的,我们是在全局配置中更改:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
这样是改变主页的导航栏样式,那么如果要改变单独一个界面的呢?很简单,我们只需要把上面的内容写在相应的.json文件中即可。
2.如何实现轮播图?
微信小程序轮播图一般用swiper组件制作,在文档中是指:滑块视图容器,其属性如下:
具体怎么使用呢?
我们先在.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实现啦
值得注意的是,今天遇到一个小坑,swiper的display-multiple-items属性的最低版本是1.9.0,低于这个版本没办法兼容哦。
3.页面链接
navigator基本属性: