LinUI组件库介绍
https://doc.mini.talelin.com/
Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁,易用的设计规范。
安装、编译LinUI
https://doc.mini.talelin.com/start/
通过npm引入LinUI,有如图所示的文件夹就表示引入成功:
但我们这时候并不能直接使用,要先在微信开发者工具选项找到构建npm,并点击:
完成构建后会生成一个叫做miniprogram_npm的文件夹,我们开发微信小程序使用的LinUI组件直接来源于这个文件夹:
如何使用自定义组件
这里我们用LInui组件中的avatar举例,首先我们不能像直接使用原生组件那样直接引用,先要在所在页面的json文件下的usingComponents里配置:
{
"usingComponents":
{
"l-avatar" :"/miniprogram_npm/lin-ui/avatar/index"
}
}
接着我们就可以使用我们配置的名称来使用组件:
<l-avatar></l-avatar>
avatar头像和昵称组件
<l-avatar class="l-avatar" placement="bottom" shape="circle" open-data="
{{['userAvatarUrl','userNickName']}}" size="180"/>
实现效果:
通过open-data接收数组,通过传入userAvatarUrl、userNickName控制显示用户头像和昵称。不过目前好像已经被微信官方废弃。
https://developers.weixin.qq.com/community/develop/doc/000e881c7046a8fa1f4d464105b001?blockType=1&page=2#comment-list
为了实现头像距离顶部的效果,我们需要再自己写一个class:
.l-avatar{
margin-top: 160rpx;
}
最终效果:
添加新的编译模式实现在编译器中页面的快速切换
新建一个posts页面,同样使用new page快速创建:
在我们还没有完成代码的前提下,该怎么能看到页面效果呢:
- 设置app.json中pages数组的第一项为你想要查看的页面
- 同样在app.json下设置entryPagePath为你想要查看的页面
- 添加新的编译模式:
我们可以通过编译模式来快速切换不同的页面:
初步了解Swiper和Swiper-Item
在posts页面顶部导航栏背景颜色我们需要红色,除了启动页的其他页面也要用到红色,所以我们就只需要单独为welcome页面设置一个背景颜色,在app,json设置所有的页面顶部导航栏默认为红色。
swiper:滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
swiper:仅可放置在swiper组件中,宽高自动设置为100%。
Swiper组件通过插槽设置轮播内容
由于我们只能在swiper中使用swiper-item,所以如果想实现自定义的轮播效果,就要在swiper-item中嵌套布局,我们称之为插槽。但我们如果仅仅是设置src属性,我们并不能看到很多的效果,图片没办法扩展到整个屏幕的宽度。
<view>
<swiper>
<swiper-item>
<image src="/images/bestplayers.png"></image>
</swiper-item>
<swiper-item>Content</swiper-item>
<swiper-item>Content</swiper-item>
</swiper>
</view>
Swiper组件内容的高宽设置技巧
为了实现比较好的效果,我们需要对swiper和swiper-item下的image设置属性:
swiper{
width: 100%;
height: 460rpx;
}
swiper image{
width: 100%;
height: 460rpx;
}
<view>
<swiper >
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
</swiper>
</view>
属性设置一定要注意字符串以JS表达式的区别
我们通过设置indicator-dots="true"可以实现显示指示点,通过设置 autoplay="true"来实现自动播放:
<view>
<swiper indicator-dots="true" autoplay="true">
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/bestplayers.jpg"></image>
</swiper-item>
</swiper>
</view>
在这里我们有一点要特别注意,那就是字符串以JS表达式的区别,当我们设置indicator-dots=“false"的时候我们发现轮播图还是有指示点,如果要取消指示点可以通过删除indicator-dots这个属性,因为默认的是没有指示点,若想要通false来实现则要使用indicator-dots=”{{false}}",因为在javascript中字符串代表true,空字符串代表false。
字符串代表true,所以就算我们随便输入一个字符串,都还是会实现有指示器的效果:
布尔属性值赋值的良好建议
在设置布尔属性的时候最好都要加上双花括号,则花括号里面的值会被当做JavaScript去计算,若我们在双花括号里面写上0,则表示的是false。当我们的属性要标记为true的时候,我们可以只写这个属性,默认标记为true。
Swiper组件的其他重要属性设置
在swiper下设置vertical属性可以实现指示点的竖直显示和竖直滑动:
通过设置circular可以实现循环滑动,通过interval实现自动切换时间间隔(默认值为5000ms)
用Flex布局组织布局思路
我们要实现的效果:
先思考是要水平还是垂直布局,新闻列表是从上往下的垂直布局,由行构成垂直布局。每个新闻总共有五行,头像一行,标题一行,图片一行,概述一行,收藏一行。开始码代码:
<view>
<view>
<image></image>
<text></text>
</view>
<text></text>
<image></image>
<text></text>
<view></view>
</view>
添加内容:
<view>
<view>
<image src="/images/avatar/1.png"></image>
<text>Nov 18 2020</text>
</view>
<text>2020LPL夏季赛季后赛观赛指南</text>
<image src="/images/bestplayers.jpg"></image>
<text>8月9号,LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中,SN战胜了FPX,为本赛季常规赛画上句号,进入季后赛的战队依次为,TES、JDG、IG、SN、V5、LGD、WE、FPX</text>
<view>
<image src="/images/collection.png"></image>
<text>92</text>
<image src="/images/view.png"></image>
<text>104</text>
</view>
</view>
设置容器的样式:
.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
padding-bottom: 10rpx;
}
设置头像的样式:
.post-author{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
头像代码:
<view class="post-author-date">
<image class="post-author" src="/images/avatar/1.png"></image>
<text class="post-date">Nov 18 2020</text>
</view>
我们通过同时对头像和日期设置vertical-align: middle来实现垂直居中,但这不算是一个好的办法,最好采用flex的align-items: center来设置居中,前提是flex-direction: row;
.post-author-date{
/* margin-top: 10rpx;
margin-bottom: 20rpx;
margin-left: 10rpx; */
display: flex;
flex-direction: row;
margin: 10rpx 0 20rpx 10rpx;
align-items: center;
}
设置文章标题样式:
.post-title{
font-size: 34rpx;
font-weight: 600;
margin-bottom: 20rpx;
color: #333;
}
设置图片样式:
.post-iamge{
width: 100%;
height: 340rpx;
margin-bottom: 30rpx;
}
底部容器、文字、图标样式:
.post-content{
color: #666;
font-size: 28rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
line-height: 40rpx;
letter-spacing: 2rpx;
}
.post-like{
display: flex;
flex-direction: row;
margin-left: 20rpx;
align-items: center;
}
.post-like-image{
height: 32rpx;
width: 32rpx;
margin-right: 16rpx;
}
.post-like-font{
margin-right: 40rpx;
font-size: 20rpx;
}
最终实现效果: