LinUI組件庫介紹

https://doc.mini.talelin.com/
Lin UI 是基于 微信小程序原生語法 實(shí)現(xiàn)的組件庫。遵循簡潔，易用的設(shè)計(jì)規(guī)范。

安裝、編譯LinUI

https://doc.mini.talelin.com/start/

通過npm引入LinUI，有如圖所示的文件夾就表示引入成功：

但我們這時(shí)候并不能直接使用，要先在微信開發(fā)者工具選項(xiàng)找到構(gòu)建npm，并點(diǎn)擊：

完成構(gòu)建后會(huì)生成一個(gè)叫做miniprogram_npm的文件夾，我們開發(fā)微信小程序使用的LinUI組件直接來源于這個(gè)文件夾：

如何使用自定義組件

這里我們用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"/>

實(shí)現(xiàn)效果：

通過open-data接收數(shù)組，通過傳入userAvatarUrl、userNickName控制顯示用戶頭像和昵稱。不過目前好像已經(jīng)被微信官方廢棄。
https://developers.weixin.qq.com/community/develop/doc/000e881c7046a8fa1f4d464105b001?blockType=1&page=2#comment-list
為了實(shí)現(xiàn)頭像距離頂部的效果，我們需要再自己寫一個(gè)class：

.l-avatar{margin-top: 160rpx; }

最終效果：

添加新的編譯模式實(shí)現(xiàn)在編譯器中頁面的快速切換

新建一個(gè)posts頁面，同樣使用new page快速創(chuàng)建：

在我們還沒有完成代碼的前提下，該怎么能看到頁面效果呢：

設(shè)置app.json中pages數(shù)組的第一項(xiàng)為你想要查看的頁面

同樣在app.json下設(shè)置entryPagePath為你想要查看的頁面

添加新的編譯模式：

我們可以通過編譯模式來快速切換不同的頁面：

初步了解Swiper和Swiper-Item

在posts頁面頂部導(dǎo)航欄背景顏色我們需要紅色，除了啟動(dòng)頁的其他頁面也要用到紅色，所以我們就只需要單獨(dú)為welcome頁面設(shè)置一個(gè)背景顏色，在app,json設(shè)置所有的頁面頂部導(dǎo)航欄默認(rèn)為紅色。

swiper:滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。
swiper:僅可放置在swiper組件中，寬高自動(dòng)設(shè)置為100%。

Swiper組件通過插槽設(shè)置輪播內(nèi)容

由于我們只能在swiper中使用swiper-item，所以如果想實(shí)現(xiàn)自定義的輪播效果，就要在swiper-item中嵌套布局，我們稱之為插槽。但我們?nèi)绻麅H僅是設(shè)置src屬性，我們并不能看到很多的效果，圖片沒辦法擴(kuò)展到整個(gè)屏幕的寬度。

<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組件內(nèi)容的高寬設(shè)置技巧

為了實(shí)現(xiàn)比較好的效果，我們需要對swiper和swiper-item下的image設(shè)置屬性：

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>

屬性設(shè)置一定要注意字符串以JS表達(dá)式的區(qū)別

我們通過設(shè)置indicator-dots="true"可以實(shí)現(xiàn)顯示指示點(diǎn)，通過設(shè)置 autoplay="true"來實(shí)現(xiàn)自動(dòng)播放：

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

在這里我們有一點(diǎn)要特別注意，那就是字符串以JS表達(dá)式的區(qū)別，當(dāng)我們設(shè)置indicator-dots=“false"的時(shí)候我們發(fā)現(xiàn)輪播圖還是有指示點(diǎn)，如果要取消指示點(diǎn)可以通過刪除indicator-dots這個(gè)屬性，因?yàn)槟J(rèn)的是沒有指示點(diǎn)，若想要通false來實(shí)現(xiàn)則要使用indicator-dots=”{{false}}",因?yàn)樵趈avascript中字符串代表true，空字符串代表false。


字符串代表true，所以就算我們隨便輸入一個(gè)字符串，都還是會(huì)實(shí)現(xiàn)有指示器的效果：

布爾屬性值賦值的良好建議

在設(shè)置布爾屬性的時(shí)候最好都要加上雙花括號(hào)，則花括號(hào)里面的值會(huì)被當(dāng)做JavaScript去計(jì)算，若我們在雙花括號(hào)里面寫上0，則表示的是false。當(dāng)我們的屬性要標(biāo)記為true的時(shí)候，我們可以只寫這個(gè)屬性，默認(rèn)標(biāo)記為true。

Swiper組件的其他重要屬性設(shè)置

在swiper下設(shè)置vertical屬性可以實(shí)現(xiàn)指示點(diǎn)的豎直顯示和豎直滑動(dòng)：

通過設(shè)置circular可以實(shí)現(xiàn)循環(huán)滑動(dòng)，通過interval實(shí)現(xiàn)自動(dòng)切換時(shí)間間隔（默認(rèn)值為5000ms）

用Flex布局組織布局思路

我們要實(shí)現(xiàn)的效果：

先思考是要水平還是垂直布局，新聞列表是從上往下的垂直布局，由行構(gòu)成垂直布局。每個(gè)新聞總共有五行，頭像一行，標(biāo)題一行，圖片一行，概述一行，收藏一行。開始碼代碼：

<view><view><image></image><text></text></view><text></text><image></image><text></text><view></view></view>

添加內(nèi)容：

<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號(hào)，LPL常規(guī)賽收官之戰(zhàn)結(jié)束，在事關(guān)季后賽輪次的比賽中關(guān)鍵對局中，SN戰(zhàn)勝了FPX，為本賽季常規(guī)賽畫上句號(hào)，進(jìn)入季后賽的戰(zhàn)隊(duì)依次為,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>

設(shè)置容器的樣式：

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

設(shè)置頭像的樣式：

.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>

我們通過同時(shí)對頭像和日期設(shè)置vertical-align: middle來實(shí)現(xiàn)垂直居中，但這不算是一個(gè)好的辦法，最好采用flex的align-items: center來設(shè)置居中，前提是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; }

設(shè)置文章標(biāo)題樣式：

.post-title{font-size: 34rpx;font-weight: 600;margin-bottom: 20rpx;color: #333; }

設(shè)置圖片樣式：

.post-iamge{width: 100%;height: 340rpx;margin-bottom: 30rpx; }

底部容器、文字、圖標(biāo)樣式：

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

最終實(shí)現(xiàn)效果：

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门与实战之阅读列表与setData数据的绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。