页面的跳转 在第一个小程序页面,预留了一个按钮,这是为了跳转到其他的页面,在微信小程序里面跳转的方法主要有下面三种:
- wx.navigateTo()
- wx.redirectTo()
- wx.switchTab() - wx.switchTab({
- url: '/index'
- })
复制代码
路径可得注意写对,区分绝对路径和相对路径: 绝对路径:一般在前面加上/,表示从根目录开始往下寻找
相对路径:相对于当前页面来说,每次使用../就是往上跳出一层
第一和第二种方法主要的区别是:前者保留当前页面(父页面,执行onHide()方法),跳转到其他页面(子页面),最后可以返回到当前页面(父页面),两个页面之间是父子关系;后者关闭当前页面(执行onUnload()方法),跳转到其他页面,无法返回,两个页面是平行关系。 第三种比较特别,这种跳转是专门跳转到带有tabBar 的页面,并关闭其他所有非tabBar 页面,使用上面两种跳转方式是无效的。从tabBar 的页面跳转到非tabBar 的页面,可以使用上面的两种方式。
轮播组件swiper swiper通常是配合着swiper-item来使用的,前者是整个轮播图的容器,后者是单一轮播子项目容器,仅在前者内部使用,宽高默认为swiper 的宽高,只是一个容器,没有其他作用,但是缺少又不行。所以对于swiper-item都应该作用在swiper父节点上面。 - <swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'>
- <swiper-item>
- <image src='/images/post/bl.png' ></image>
- </swiper-item>
- <swiper-item>
- <image src='/images/post/xiaolong.jpg'></image>
- </swiper-item>
- <swiper-item>
- <image src='/images/post/vr.png' ></image>
- </swiper-item>
- </swiper>
复制代码我们不能想当然的认为在swiper-item里面只能放图片,还可以放入其他的一些东西,比如文本;实现一些其他的业务,比如弹幕轮播。 通过设置vertical='true'设置轮播滚动的方向,indicator-dots='true'指示器的显示 在轮播图里面,实际控制图片的大小是依靠image标签,默认有宽高。
事件的绑定 事件一般分两种: 冒泡事件:点击了子节点,父节点上面的事件也会执行;但是点击父节点上面的事件,子节点上面的事件不会执行bind开头:表示冒泡,后面接事件名 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。一般在子节点上面添加。catch开头:表示非冒泡,后面接事件名
- <view bindtap='onbind'>
- 我是事件2
- <view bindtap='onBind'>我是事件1</view>
- </view>
- onBind: function (event) {
- console.log("事件1执行了")
- },
- onbind: function (event) {
- console.log("事件2执行了")
- }
复制代码在我点击了事件1没有点击事件2的时候,事件2也会被触发,这就是冒泡;但是把方法改为catchtap,点击事件1的时候,只是事件1的函数触发,事件2函数不会被执行。还有一种catch:tap的声明事件的方法。
tabBar页面配置
前面说到在app.json是配置一些小程序项目的全局配置,可以在某个页面下面的json文件来单独配置该页面所需要的配置。
tabBar是在全局app.json里面配置,跟项目页面都需要在全局app.json里面注册一样,tabBar也是里面的一个属性,其中的list数组最上至少配置2个,最多5个,按照其在数组里面的顺序排布。
- "tabBar": {
- "position":"top", // 按钮的位置,默认为bottom,设置为top的时候,icon设置无效
- "borderStyle": "white", // tabBar的颜色
- "list": [
- {
- "pagePath": "pages/posts/post", // 页面路径,必须先在pages属性中定义
- "text": "阅读",
- "iconPath": "images/tab/yuedu.png", // 未选中的图片
- "selectedIconPath": "images/tab/yuedu_hl.png" // 选中的图片
- },
- {
- "pagePath": "pages/movies/movies",
- "text": "电影",
- "iconPath": "images/tab/dianying.png",
- "selectedIconPath": "images/tab/dianying_hl.png"
- }
- ]
- }
复制代码
在全局的app.json里面配置好了,那么项目启动的时候就默认在最底部出现栏位的切换;
当然也可以改变其位置,使其出现在顶部,出现在顶部的时候,按钮的图片失效:
数据的绑定小程序里面没有dom节点的概念,不能够像使用jQuery一样,通过操作DOM节点来给页面添加数据。相反的小程序通过数据绑定,来达到数据优先。这样的好处在于不用操作DOM,减少页面加载的时间。 - <view>
- <view src='{{author_img}}' catch:tap='onBind'>{{date}}</view>
- </view>
- Page({
- // 页面的初始数据
- data: {
- date:"我是事件1"
- }
- }
复制代码
上面这种就是数据绑定的方式,在对应页面JS文件中的page()的data属性里面,填写页面需要的数据,以键值对的形式,然后在页面对应的位置使用{{key}},绑定数据。当然可以在一个位置绑定多个数据,只需要这样{{key1}}{{key2}}。在标签的属性上面绑定数据的时候,需要使用"{{key}}" - <view>
- <view catch:tap='onBind'>{{date}}{{title}}</view>
- </view>
- Page({
- data: {
- date:'stp 17',
- title:' hi icessun'
- },
- onLoad: function (options) {
- var dates={
- date:'stp 18',
- title:'icessun'
- }
- this.setData(dates)
- }
- }
复制代码
当然不可能直接在data里面写数据,这些数据都是从服务器上面获取的,在页面初始化的时候,就会向服务器发送请求,对数据进行一番处理后,通过this.setData()的方法把数据绑定在页面上面,this.setData()方法里面接收到的参数,相当于把这写参数,先放在data属性里面,然后在通过data属性中的键值,绑定在页面上。当然会把相同的属性名(key值)的覆盖掉
|