在上一篇文章中，創建了一個空白的文章模塊頁面。在這一篇文章，讓我們來向頁面中填充內容。

頁面效果

填充前的頁面

填充后的頁面

涉及uniapp組件

1.view

視圖容器，類似傳統html中的div，用于包裹各種元素的內容。

2.swiper

滑塊視圖，可上下和左右滑動，一般作為banner輪播圖。

3.scroll-view

區域滾動視圖，有縱向滾動和橫向滾動。

4.屬性解讀

例子：
a.<swiper class="article-swiper" circular :autoplay="autoplay" :indicator-dots="true" :duration="1000"></swiper>b.<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true" @scrolltoupper="upper"@scrolltolower="lower" @scroll="scroll" ></scroll-view>

1) class=“style1 style2 …”

class賦值的是自定義樣式，具體樣式定義內容在vue文件的

2) circular單屬性無賦值

等價于circular=“true”，屬性的靜態綁定寫法，不會變更

3) :autoplay=“autoplay”

vue中屬性的動態綁定寫法，綁定一個參數，參數值可根據界面操作(比如button、switch)變更

4) @scrolltolower=“lower”屬性前加@

vue中動態綁定方法的寫法

一、頂部banner圖

/pages/article/article.vue

<template><view class="u-p-l-10 u-p-r-10">/*** class="article-swiper"：樣式為style中自定義的.article-swiper{...}* circular：是否采用銜接滑動* :autoplay="autoplay"：是否自動切換，此處設置動態綁定autoplay參數* indicator-dots：是否顯示面板展示點* duration="1000"：滑動動畫時長* */<swiper class="article-swiper" circular :autoplay="autoplay" indicator-dots duration="1000">/*** swiper下的每個swiper-item是一個滑動切換區域*/<swiper-item><view class="article-swiper-item uni-bg-red">red</view></swiper-item><swiper-item><view class="article-swiper-item uni-bg-green">green</view></swiper-item><swiper-item><view class="article-swiper-item uni-bg-blue">blue</view></swiper-item></swiper><view ><view>自動播放</view>/*** switch 開關選擇器* :checked="autoplay"：是否選中，由autoplay參數決定* @change="changeAutoplay"：checked改變時觸發change事件，綁定changeAutoplay方法*/<switch :checked="autoplay" @change="changeAutoplay" /></view></view>
</template>

<script>import config from "@/common/config.js"export default {data() {return {// 自動播放參數：默認值是trueautoplay: true}},methods: {changeAutoplay(e) {// 點擊時開關狀態取反this.autoplay = !this.autoplay}}}
</script>

<style lang="scss" scoped>.article-swiper {height: 300rpx;}.article-swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}.uni-bg-red {background-color: rgb(255, 85, 127);}.uni-bg-green {background-color: rgb(170, 255, 0);}.uni-bg-blue {background-color: rgb(85, 170, 255);}
</style>

二、靜態按鈕列表

/pages/article/article.vue

<template><view class="u-p-l-10 u-p-r-10"><view><view class="rowClass"><u-row>/*** u-row、u-col：流式柵格系統，隨著屏幕或視口分為 24 份，可以迅速簡便地創建布局。* span：定義u-col應該跨越的列數* v-for="(item,index) in navList"：列表渲染指令*	(1) navList：data中的源數據數組*  (2) item：data數據navList數組的別名*  (3) index：navList數組的索引* @tap="clickNav(item)：方法暫未定義** image：按鈕圖片* item.name：靜態按鈕名稱*/<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index"><view class="u-padding-20" @tap="clickNav(item)" hover-class="hoverClass"><image :src="item.src" style="width: 90rpx;height: 90rpx;" mode="widthFix"></image><view class="tabName">{{item.name}}</view></view></u-col></u-row></view></view></view>
</template>

<script>import config from "@/common/config.js"export default {data() {return {navList:[{name:"發布文章",url:"pages/center/publishArticle"},{name:"我的文章",url:"pages/center/myArticle"},{name:"所有文章",url:"pages/center/allArticle"},{name:"瀏覽記錄"}]}}}
</script>

<style lang="scss" scoped>
.rowClass{border-radius: 8px;background-color: rgb(255, 255, 255);margin-top: 10rpx;text-align: center;}.hoverClass{background-color: #E4E7ED;}.tabName{font-size: 28rpx;color: $u-main-color;}
</style>

三、橫向滾動圖

/pages/article/article.vue

<template><view class="u-p-l-10 u-p-r-10"><view><view ><text>滾動文章banner</text></view><view>/*** :scroll-top="scrollTop"：設置豎向滾動條位置* scroll-y="true"：允許縱向滾動* show-scrollbar="true"：是否出現滾動條，僅支持app-nvue* @scrolltoupper="upper"：滾動到頂部/左邊，會觸發 scrolltoupper 事件* @scrolltolower="lower"：滾動到底部/右邊，會觸發 scrolltolower 事件* @scroll="scroll"：滾動時觸發**/<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true" @scrolltoupper="upper"@scrolltolower="lower" @scroll="scroll" ><view id="demo1" class="scroll-view-item uni-bg-red">A</view><view id="demo2" class="scroll-view-item uni-bg-green">B</view><view id="demo3" class="scroll-view-item uni-bg-blue">C</view></scroll-view></view></view></view>
</template>

<script>import config from "@/common/config.js"export default {data() {return {scrollTop: 0,old: {scrollTop: 0}}},methods: {upper: function(e) {console.log(e)},lower: function(e) {console.log(e)},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop}}}
</script>

<style lang="scss" scoped>
.uni-bg-red {background-color: rgb(255, 85, 127);}.uni-bg-green {background-color: rgb(170, 255, 0);}.uni-bg-blue {background-color: rgb(85, 170, 255);}.scroll-Y {height: 300rpx;}.scroll-view-item {height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}
</style>

四、動態列表 + 詳情跳轉

/pages/article/article.vue

<template><view class="u-p-l-10 u-p-r-10"><view><view ><text>滾動文章列表</text></view><view class="wrap"><scroll-view scroll-Y style="heignt: 100%;width 100%"><view>/*** @click="clickContent(item)：點擊觸發clickContent方法，跳轉詳情頁面*/<view class="tabSwiper" v-for="(item,value) in articleList" :key="item.id" @click="clickContent(item)"><view class="top"><view class="left"><u-icon name="bell" :size="35" color="#2979ff"></u-icon><view class="title">{{ item.title }}</view><u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon></view><view class="right">{{ item.createTime }}</view></view><view class="item"><view class="content"><view class="title u-line-2">{{ item.content }}</view></view></view></view></view></scroll-view></view></view></view>
</template>

<script>import config from "@/common/config.js"export default {data() {return {pageNum:1,pageSize:50,articleList: [],}},onLoad() {this.getArticleList();},methods: {clickContent(item){if(item.id){this.$u.route('/pages/article/content', {id: item.id});}},getArticleList(){let url = "/api/cmsApi/findArticleList";this.$u.get(url,{pageNum:this.pageNum,pageSize:this.pageSize,orderByColumn:'create_time',isAsc:'desc'}).then(obj => {let data = obj.rowsdata.filter(item=>{this.articleList.push({id:item.id,title: item.smallTitle,content: item.bigTitle,createTime: item.createTime})})});}}}
</script>

<style lang="scss" scoped>
.tabSwiper {width: 710rpx;background-color: #ffffff;margin: 20rpx auto;border-radius: 20rpx;box-sizing: border-box;padding: 20rpx;font-size: 28rpx;.top {display: flex;justify-content: space-between;.left {display: flex;align-items: center;.title {margin: 0 10rpx;font-size: 32rpx;font-weight: bold;}}.right {color: $u-tips-color;}}.item {display: flex;margin: 20rpx 0 0;.left {margin-right: 20rpx;image {width: 200rpx;height: 200rpx;border-radius: 10rpx;}}.content {.title {font-size: 28rpx;line-height: 50rpx;}}.right {margin-left: 10rpx;padding-top: 20rpx;text-align: right;}}}.wrap {display: flex;flex-direction: column;height: calc(100vh - var(--window-top));width: 100%;}
</style>

五、詳情頁面

/pages/article/content.vue 添加詳情頁面的vue文件

<template><view><u-navbar :is-back="true" :title="title" :border-bottom="false"></u-navbar><view class="u-content"><u-parse :html="content":autosetTitle="true":show-with-animation="true":selectable="true"></u-parse></view></view>
</template><script>export default {data() {return {title:'文章詳情',content: ``}},onLoad(option) {let id = option.idlet url = "/api/cmsApi/getArticle/"+id;this.$u.get(url).then(res => {this.title = res.data.smallTitlethis.content = res.data.articleContent});},}
</script><style>page{background-color: #FFFFFF;}
</style>
<style lang="scss" scoped>.u-content{margin:0 10rpx;padding: 24rpx;font-size: 34rpx;color: $u-main-color;line-height: 1.8;white-space: pre-wrap !important;}
</style>

在pages.json添加文章詳情頁的的路由

{"pages": [// pages 設置頁面路徑及窗口表現//pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{// pages節點的第一項為應用入口頁（即首頁）"path": "pages/index/index","style": {"navigationStyle": "custom" ,// 導航欄樣式：取消原生系統導航欄"navigationBarTitleText": "首頁", // 導航欄標題文字"enablePullDownRefresh": true,  // 下拉刷新"app-plus": {// 編譯到App平臺的特定樣式"pullToRefresh": {// 下拉刷新小圈圈樣式"support": true,"color": "#2979ff", //小圈圈的顏色"style": "circle" //小圈圈的樣式}}}},{"path" : "pages/article/article","style" : {"navigationStyle": "custom" ,"navigationBarTitleText" : "文章","enablePullDownRefresh" : true}},{"path" : "pages/article/content","style" : {"navigationStyle": "custom" ,"navigationBarTitleText" : "文章詳情","enablePullDownRefresh" : true}}]
}

詳情頁效果如下

參考資料

uni-app官網

在此感謝@Ann_0207的技術支持！