• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序入门第二天

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

           

先分析下所需要的组件,在首页里上面是轮播,中间为一个列表,下面为一个导航栏。首先来实现下面的导航栏,先看下微信小程序官方文档里关于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: 30rpx;
}
.pro-image{
float: left;
width: 200rpx;
height: 270rpx;
}
.pro_body{
margin-left: 230rpx;
}
.pro_title{
font-size: 34rpx;
line-height: 1;
}
.pro_content{
font-size: 22rpx;
color: #9a9a9a;
line-height: 1;
}
.pro-footer{
overflow: hidden;
}
.btn-read{
margin-right: 30rpx;
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: 360rpx;
}
swiper image{
display: block;
width: 100%;
height: 100%;
}

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








                                                                        



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
基于微信小程序开发的demo发布时间:2022-07-18
下一篇:
微信小程序修改自定义组件的样式发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap