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;
}

最终实现效果：

微信小程序入门与实战之阅读列表与setData数据的绑定相关推荐

微信小程序入门与实战(3)——阅读文章列表页面导入js模拟的数据
data/data.js var postLists = [{date: "Sep 18 2016",title: "正是虾肥蟹壮时",imgSrc: &quo ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序入门与实战笔记
微信小程序目录微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础我们在app.json配置tabBar选项卡: "tabBar": ...
Taro 开发微信小程序入门与实战
目前比较流行的小程序开发框架主要有 WePY.Mpvue.Taro. WePY,Mpvue 是完全用 Vue 的开发方式来开发小程序,WePY 是比较早的小程序开发框架了,相对而言 Mpvue 的开发 ...
【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...

微信小程序入门与实战之阅读列表与setData数据的绑定