iview插件的引入
用微信小程序后,以前的第三方插件因为样式的问题而无法使用,而小程序有个weapp-iview,使用方法如下:
- 下载weapp-iview,放入自己的目录中;
- 在需要用到weapp的页面对应的json,进行如下配置:
"usingComponents": { "i-button": "../../dist/button/index" }
- 在对应页面中使用
上拉加载下拉刷新
可以利用小程序的上拉刷新,下拉加载功能,具体用法如下:
- 需要加载功能的页面对应的json配置
"enablePullDownRefresh": true
- 在.vue文件中的export default中(注意不是methods中)加入小程序对应的生命周期函数
onReachBottom和async onPullDownRefresh
全局变量的配置
可以把全局变量写在单独的js中export出来,然后在main.js中引用,并定义Vue.prototype.baseUrl(例如)。
轮播图
可以用小程序的轮播,用小程序的参数,vue的语法,例如:
<swiper class="swiper swiper-container"
:indicator-dots="true"
interval="5000"
duration="1000"
autoplay>
<block v-for="(item, index) in banners" :index="index" :key="index">
<swiper-item>
<img :src="item.src" class="swiper-slide" />
</swiper-item>
</block>
</swiper>
footer vs tabbar
小程序有自己的tabbar,只需要在app.json里进行配置就好,无需自己写footer组件,配置如下:
"tabBar": {
"list": [
{
"pagePath": "pages/index/main",
"text": "tab1",
"selectedIconPath": "./static/icon-1-current.png",
"iconPath": "./static/icon-1.png"
},
{
"pagePath": "pages/product/main",
"text": "tab2",
"selectedIconPath": "./static/icon-2-current.png",
"iconPath": "./static/icon-2.png"
},
{
"pagePath": "pages/index/main",
"text": "tab3",
"selectedIconPath": "./static/icon-3-current.png",
"iconPath": "./static/icon-3.png"
},
{
"pagePath": "pages/index/main",
"text": "tab4",
"selectedIconPath": "./static/icon-4-current.png",
"iconPath": "./static/icon-4.png"
},
{
"pagePath": "pages/pcenter/main",
"text": "tab5",
"selectedIconPath": "./static/icon-5-current.png",
"iconPath": "./static/icon-5.png"
}
],
"color": "#666666",
"selectedColor": "#e02e24",
"backgroundColor": "#ffffff"
}