微信小程序入门第二天

今天开始写一个简单的微信小程序,先贴一下效果图,

           

先分析下所需要的组件,在首页里上面是轮播,中间为一个列表,下面为一个导航栏。首先来实现下面的导航栏,先看下微信小程序官方文档里关于tabBar的主要属性的说明:


其中在这里我用到的是  selectedColor 和 list,实现形式为在 app.json 里写如下代码:

 

"tabBar":{
"selectedColor" : "#2e5e86",
"list" :[
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home_default.png",
"selectedIconPath": "images/home_selected.png"
},
{
"pagePath": "pages/first/first",
"text": "设置",
"iconPath": "images/setting_default.png" ,
"selectedIconPath": "images/setting_selected.png"
}
]
}

需要注意的是list  接受一个数组,其中每一项都是一个对象,具体属性为以上我用到的四个,  pagePath  用来指定页面路径,需要注意的是页面路径要先在 pages 中定义。 text  为  tab 上的按钮文字。 iconPath  为   tab 上的图片路径,这里暂不支持网络图片。  selectedIconPath  为选中时的图片路径。具体描述可以参见官方文档,这样下面的导航栏部分就实现了。

      其次,来看下中间的列表部分,为了实现列表的效果,需要使用的是  wx:for。在组件上使用 wx:for  控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item,具体使用方法暂不描述,这里只贴出具体实现。以下为index.wxml 中的代码

< view class= 'items-list'>
< view class= 'pro-item' wx:for= "{{proList}}"
data-index= '{{index}}' >
< image src= "{{item.image}}" class= "pro-image" width= '190rpx' ></ image >
< view class= 'pro_body'>
< view class= 'pro_title'>{{item.title}} </ view >
< text class= 'pro_content'>{{item.content}} </ text >
< view class= 'pro-footer'>
< button class= 'btn-read' size= "{{defaultSize}}">阅读 </ button >
< button class= 'btn-buy' size= "{{defaultSize}}" open-type= "contact">联系客服 </ button >
</ view >
</ view >
</ view >
</ view >

关于view, text 的用法暂不描述,关于 button 的属性之一 open-type 的用法提一下,这是微信开放功能,具体可选值为:


在首页中的组件所需要的样式定义在 index.wxss 中,具体代码如下:

/* items-list*/
.items-list{
}
.pro-item{
overflow: hidden;
margin: 30 rpx;
}
.pro-image{
float: left;
width: 200 rpx;
height: 270 rpx;
}
.pro_body{
margin-left: 230 rpx;
}
.pro_title{
font-size: 34 rpx;
line-height: 1;
}
.pro_content{
font-size: 22 rpx;
color: #9a9a9a;
line-height: 1;
}
.pro-footer{
overflow: hidden;
}
.btn-read{
margin-right: 30 rpx;
float: left;
}
btn-buy{
float: right;
}

使用的变量名在 index.js 里面进行定义,具体代码如下:

defaultSize: 'mini',
proList: [
{
image: '/images/item1.png',
title: '我不',
content: '百万级畅销书作家大冰2017年新书\n'+
'作家很多,野生作家只有一个\n'+
'写书的人很多,大冰只有一个\n',
},
{
image: '/images/item2.png',
title: '白鹿原',
content: '20周年纪念典藏版,完整呈现了1993年最原始版本.\n'+
'1997年荣获第四届茅盾文学奖,渭河平原百年变迁的雄奇史诗!'
},
{
image: '/images/item3.png',
title: '呐喊',
content: '有些事如果你从来没有想过,鲁迅先生的作品你就读不懂;有些现状如果你从来没有痛恨过,你就不可能理解鲁迅先生!我们虽然生非同时,但鲁迅先生笔下的中国人依然如故,这也是我们重读鲁迅的意义所在 '
},
{
image: '/images/item4.png',
title: '傲慢与偏见',
content: '一个恃才傲物狂放不羁,一个聪颖美丽却心存偏见,千回百转,历经种种心灵涤荡,爱情——终如芙蓉般在清澈的湖水中,静静地含露绽放。'
},
]

总上就是中间部分的实现,最后是上面轮播图的实现,在微信小程序里,轮播图的使用 swiper 来实现,还是先来看下主要的属性


这里只截取了部分属性,完整的使用可以参看官方文档,下面贴一下我的代码:

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

</ swiper >

在这里我只设置了是否显示指示点,是否自动切换,自动切换间隔,滑动动画时长几个属性,具体其他属性有什么样的效果,可以自己去尝试下。同样的贴下index.js 里的代码和index.wxss 中的代码:imageUrls: [

imageUrls: [
'/images/banner1.jpg',
'/images/banner2.jpg',
'/images/banner3.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,

/**swiper**/
swiper{
width: 100% ;
height: 360 rpx;
}
swiper image{
display: block;
width: 100%;
height: 100%;
}

以上为首页的全部实现代码,至于设置页面的实现和首页差不多,这里就不贴了,有什么不足望告知。








                                                                        


1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值