swiper轮播
在wxml
文件中布局:
<swiper indicator-dots='true' autoplay="true" interval="5000" circular='true'>
<swiper-item><image src="/images/wx.png"></image></swiper-item>
<swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
<swiper-item><image src="/images/vr.png"></image></swiper-item>
</swiper>
在wess
中设置样式
swiper,swiper image{
width:100%;
height:600rpx
}
注:<swiper-item>
仅可放置在组件中,宽高自动设置为100%。只是从单一个标识容器。所以设置样式要设置到<swiper>
中。
data渲染
如下代码,在onload
钩子函数中,可以直接对this.data
做变量赋值操作,而可以不用 this.setData()
函数来更新数据,同样可以最后将 this.data
中的数据渲染到页面上,原因是页面渲染操作在 onload
之后执行。但是,在 onload
中异步调用中更新数据还是只能使用 this.setData()
,否则可能来不及渲染不到页面上。
Page({
data:{
},
onLoad:function(){
// 生命周期函数--监听页面加载1
this.data.postList =postsData.postList;
// this.setData({
// posts_key:postsData.postList
// });
}
})
Page标签
<Page>
任何页面的跟标签,所以可以通过以下代码来设置 全屏背景颜色:
page{
height:100%;
background:#b3d4db;
}
引用js和引用wxss
1、引用js
:
var postsData=require('../../data/posts-data.js') //貌似只能用相对路径
posts-data.js
文件内容如下,使用 module.exports
到处模块:
var local_database=[
{
date: 'sep 18 2016',
title: '正是虾肥蟹壮时',
imgSrc: '/images/post/crab.png',
avatar: '/images/avatar/1.png',
content: '本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像',
reading: '112',
collection: '96',
headImgSrc:'/images/post/crab.png',
author:'李白',
dataTime:'24time',
detail:'并可以在手机上体验该小程序的实际效果。',
postId:1
},
{
//按住alt + shift + f可以格式化代码
date: 'sep 19 2016',
title: '正是虾肥蟹壮时',
imgSrc: '/images/post/bl.png',
avatar: '/images/avatar/2.png',
content: '本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像',
reading: '112',
collection: '96',
headImgSrc:'/images/post/bl.png',
author:'李白2',
dataTime:'24time',
detail:'并可以在手机上体验该小程序的实际效果。',
postId:2
},
...
]
module.exports={ //导出模块
postList : local_database
}
2、引用wxss
@import 'post-item/post-item-template.wxss';
template 模板
template
主要用来提高代码的复用行,没有具体的含义。例如新建一个item-template.wxml
文件
<template name='postItem'>
<view class='post-container'>
<view class='post-author-date'>
<image wx='{{img_condition}}' class='post-author' src="{{avatar}}"></image>
<text class='post-date'>{{date}}{{idx}}</text>
</view>
<text class='post-title'>{{title}}</text>
<image class='post-image' src="{{imgSrc}}"></image>
<text class='post-content'>{{content}}</text>
<view class='post-like'>
<image class='post-like-image' src="../../images/icon/chat.png"></image>
<text class='post-like-font'>{{coolection}}</text>
<image class='post-like-image' src="../../images/icon/view.png"></image>
<text class='post-like-font'>{{reading}}</text>
</view>
</view>
</template>
使用的时候,要先导入,再使用,如果模板中有对应的样式文件,也要在引用模块的wxss
文件中导入模板的样式文件。
<import src='item/item-template.wxml'/> <!---这里使用的是相对路径->
<view class='body'>
<swiper indicator-dots='true' autoplay="true" interval="5000">
<swiper-item><image src="/images/wx.png"></image></swiper-item>
<swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
<swiper-item><image src="/images/vr.png"></image></swiper-item>
</swiper>
<block wx:for="{{posts_key}}" wx:for-item="item">
<template is='postItem' data='{{...item}}'/> <!--is 的值是模板中name属性值 ...展开对象 -->
</block>
</view>
相应的要在wxss
文件中导入模板的样式文件:
@import 'item/item-template.wxss';
swiper{
width:100%;
height:600rpx
}
swiper image{
width:100%;
height:600rpx
}
图片四周添加阴影
border: 3rpx solid #eee;
border-radius: 3rpx;
box-shadow: -3rpx 0px 5px #eee, /*左边阴影*/
0px -3rpx 5px #eee, /*上边阴影*/
3rpx 0px 5px #eee, /*右边阴影*/
0px 3rpx 5px #eee; /*下边阴影*/
text一行显示,多余部分使用省略号
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;