成年人的在线免费视频,婷婷91精品国产91久久综合,人妻精品人妻888,性感美女视频一区二区三区,国产熟女精品视频免费看,国内精品九九久久精品小草,中文字幕日韩精品欧美丝袜,午夜精品久久久久蜜桃毛片,91久久在线视频观看

首先說(shuō)說(shuō)，我是菜鳥(niǎo)，原來(lái)都沒(méi)接觸過(guò)這鬼東西，寫(xiě)的不對(duì)的，大神多指導(dǎo)，有好的教教我。我只是把我的實(shí)現(xiàn)過(guò)程分享出來(lái)！??！有些也不完善，比我還菜的就等等我學(xué)會(huì)再改！

1、新建個(gè)頁(yè)面

在pages目錄右鍵點(diǎn)擊新建頁(yè)面，名稱list，會(huì)自動(dòng)生成相應(yīng)的目錄及文件，參考如下

2、新建后頁(yè)面是長(zhǎng)這樣的，分塊來(lái)看就是三個(gè)部分

第一個(gè)模板代碼

第二個(gè)js代碼

第三個(gè)樣式

<template>
 <view>
  
 </view>
</template>

<script>
 export default {
  data() {
   return {
    
   }
  },
  methods: {
   
  }
 }
</script>

<style>

</style>

3、頁(yè)面的設(shè)計(jì)，我想要在底部有個(gè)導(dǎo)航欄，像這樣的

uView里就有，文檔地址是：https://www.uviewui.com/components/tabbar.html

參照官方文檔，就直接在view代碼內(nèi)寫(xiě)入：

<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true"
   :safeAreaInsetBottom="true">
   <u-tabbar-item text="首頁(yè)" icon="home" @click="onClick_button('/pages/index/index')"></u-tabbar-item>
   <u-tabbar-item text="分類" icon="photo" @click="onClick_button('/pages/list/list')"></u-tabbar-item>
   <u-tabbar-item text="搜索" icon="play-right"></u-tabbar-item>
   <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
  </u-tabbar>

我放了四個(gè)，首頁(yè)的分類的點(diǎn)擊事件我加了，其它的后面邊學(xué)邊加，放個(gè)首頁(yè)、分類、搜索、然后有開(kāi)發(fā)會(huì)員中心的話，就放個(gè)‘我的’

樣式什么的要改，參數(shù)官方文檔

我這里就加了個(gè)click事件

@click="onClick_button('/pages/index/index')"

這意思是當(dāng)我點(diǎn)擊時(shí)，觸發(fā)js的 onClick_button函數(shù)，我把地址參數(shù)傳過(guò)去

所以，要在js的method里寫(xiě)上onClick_button函數(shù)，其實(shí)就是個(gè)跳轉(zhuǎn)的，如下

   onClick_button(tourl) {
    uni.navigateTo({
     url: tourl,
     success: res => {
      console.log(tourl);
     },
     fail: () => {},
     complete: () => {}
    });
   },

到這里，底部的導(dǎo)航欄也就出來(lái)了

這里候運(yùn)行到瀏覽器試試，是不是底部導(dǎo)航欄也就出來(lái)了

IDE調(diào)試內(nèi)部瀏覽器，如果沒(méi)裝，點(diǎn)擊了會(huì)自己安裝，稍等一會(huì)

有個(gè)調(diào)試信息，相當(dāng)于瀏覽器F12功能，

4、同樣是頁(yè)面設(shè)計(jì)，頂部我想要個(gè)列出所有1級(jí)欄目，最左邊有個(gè)全部的，打開(kāi)默認(rèn)是所有最新的10條信息

我用的是uview的u-tabs：https://www.uviewui.com/components/tabs.html

像這樣

直接按官方的來(lái)，在view下面直接加入：

  <u-tabs :list="category" @click="categoryclick">
   <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被點(diǎn)擊')">
    <u-icon name="list" size="21" bold></u-icon>
   </view>
  </u-tabs>

來(lái)說(shuō)明代碼：

list數(shù)據(jù)，我定義category，點(diǎn)擊事件剛剛有講到，我定義categoryclick，那個(gè)插槽被點(diǎn)擊的，我是先留著，看有沒(méi)有用，后面如果沒(méi)用刪了就好了，這里暫時(shí)沒(méi)用到

先開(kāi)始說(shuō)category數(shù)據(jù)：

A:在js的data(),return里先定義，其它的后面講到，圈的就是分類數(shù)組。

B:請(qǐng)求數(shù)據(jù)：在js的onload里，在加載時(shí)請(qǐng)求api，獲取數(shù)值，這里我先不用request的類，直接使用uni-request，比較直觀點(diǎn)

   uni.request({
    url: 'http://www.strconvert.com/index.php?s=httpapi&id=3&appid=1&appsecret=PHXXXXXXXX25',
    method: 'GET',
    data: {},
    success: res => {
     this.category = res.data.data;
     this.category.unshift(this.all);
    },
    fail: () => {
     this.status = 'no-more';
    },
    complete: () => {}
   });

這個(gè)url，是我新建的api數(shù)據(jù)的地址，其實(shí)直接用欄目的api也是可以

上面代碼里 有一個(gè)

 this.category.unshift(this.all);

這是因?yàn)?，我取后的分類，并沒(méi)有“全部”，這個(gè)項(xiàng)目，所以我要把“全部”這個(gè)添加進(jìn)數(shù)組，定義在data() return里

    //這個(gè)all定義就是加入分類數(shù)據(jù)數(shù)組前面
    all: {
     name: '全部',
     id: 0
    },

后臺(tái)API接口數(shù)據(jù)是這樣的

{category module=share  pid=0  order=hit}
{php $api[$key]['id']=$t['id'];}
{php $api[$key]['name']=$t['name'];}
{php $api[$key]['mid']=$t['mid'];}
{/category}

成功的res數(shù)據(jù)，你們要看不明白，可以使用console.log()來(lái)打印調(diào)試看看

 this.category = res.data.data;

像這樣

到了這里，測(cè)試運(yùn)行一下，就發(fā)現(xiàn)頂部分類導(dǎo)航也出來(lái)了

C:點(diǎn)擊事件，記得剛才代碼里有個(gè)點(diǎn)擊事件吧，@click那，要在js的method里加個(gè)方法categoryclick，代碼如下：

   categoryclick(item) {
    this.mid = item.mid;
    this.catid = item.id;
    this.page = 1;
    this.getlist();
   },

這個(gè)點(diǎn)擊之后，就是把點(diǎn)擊對(duì)應(yīng)的分類的模塊、分類id、當(dāng)前頁(yè)面置1，然后再調(diào)用今年數(shù)據(jù)的getlist方法（這個(gè)方法，下一步講到）

這幾個(gè)要定義的，同樣在data return里我已經(jīng)有定義過(guò)了的

5、頁(yè)面正文內(nèi)容，正文內(nèi)容圖文混排

圖文混排可以查看uni-ui的圖文混排，我這里加個(gè)<view>放到頂部導(dǎo)航下面

代碼如下：

  <view class="post-list">
   <uni-list v-for="item in newslist">
    <!-- 水平排列，左圖右文 -->
    <uni-list-item :title="item.title" clickable :id="item.id" @click="onClick(item.id)">
     <template v-slot:header>
      <view class="uni-thumb">
       <image :src="item.thumb" mode="aspectFill"></image>
      </view>
     </template>
    </uni-list-item>
   </uni-list>
  </view>

這里用到v-for，就是循環(huán)，不懂的可以看手冊(cè)去。

newslist

是我們定義的內(nèi)容數(shù)組，然后后面就循環(huán)里就用item.title啊什么的

又看到有個(gè)

@click事件，到方法onClick，傳參信息id

先說(shuō)newslist

同樣請(qǐng)求api，這回我用request插件來(lái)

上面有張圖，同樣定義了data() return里有 newslist:[]

A：在onload里，調(diào)用getlist方法

this.getlist()

B:在method里定義方法getlist,代碼如下：

   getlist() {
    console.log(this.mid);
    this.$http.get('c=search&api_call_function=module_list', {
     s: this.mid,

     id: this.catid,
     page: this.page,
    }).
    then((newslist) => {
     this.newslist = newslist;
     //this.count = newslist.total;
     //這里只會(huì)在接口是成功狀態(tài)返回
    }).catch(function(error) {
     //這里只會(huì)在接口是失敗狀態(tài)返回，不需要去處理錯(cuò)誤提示
     //console.log(error);
    });
   },

this.$http.get

這個(gè)參照插件的使用方法，get后面緊跟的是url，因?yàn)樵诓寮镆呀?jīng)定義了前面的appid和appcecret和根網(wǎng)址，所以這里只要有后面的參數(shù)即可

c=search&api_call_function=module_list

這是官方給出的參數(shù)

我們要增加的參數(shù)在這里

{
     s: this.mid,

     id: this.catid,
     page: this.page,
    }

記得這個(gè)點(diǎn)擊欄目里有說(shuō)到過(guò)吧，s是模塊，默認(rèn)就是news，id是分類id，默認(rèn)是1，page是當(dāng)前面，在沒(méi)有點(diǎn)擊分頁(yè)時(shí)，默認(rèn)是1

所以當(dāng)點(diǎn)擊分類時(shí)，都按默認(rèn)來(lái)，如果點(diǎn)擊了欄目，再重新賦值

返回?cái)?shù)組在這里賦值給newslist

then((newslist) => {
     this.newslist = newslist;
     //this.count = newslist.total;
     //這里只會(huì)在接口是成功狀態(tài)返回
    })

（那個(gè)count本來(lái)是我要取得分類的信息數(shù)，但寫(xiě)在獲取欄目API那里，但發(fā)現(xiàn)，因?yàn)閿?shù)組加了一個(gè)，信息空 了一個(gè)出來(lái)，后面又取消了）

去后臺(tái)，API模塊內(nèi)容接口那設(shè)置一下，模塊多的，每個(gè)都設(shè)置一下調(diào)用的數(shù)據(jù)，把那些要用的和可能要用到的勾上

到了這里，運(yùn)行一下，應(yīng)該信息都出來(lái)了：

6、最后一下，點(diǎn)擊后，到跳到信息頁(yè)去

剛剛列表模板里留了個(gè)@click，記得不，方法是onClick，傳參是信息ID

在js的method里加這個(gè)方法

   onClick(id) {
    var url = './';
    uni.navigateTo({
     url: '/pages/show/show?id=' + id,
     success: res => {
      console.log(id);
     },
     fail: () => {},
     complete: () => {}
    });
   },

這也就是個(gè)頁(yè)面中轉(zhuǎn)的

url提前定義了pages/show/show，加上個(gè)id，這個(gè)下一節(jié)講到，就是要新建信息頁(yè)了

7、分頁(yè)

剛剛說(shuō)取總數(shù)沒(méi)得到，其實(shí)自己建個(gè)api接口數(shù)據(jù)，再得到欄目id也是可以，我這里也不麻煩了，直接用個(gè)加載更多的

<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore" />

這個(gè)也沒(méi)什么好說(shuō)的了，后面我還是想用分頁(yè)的，可能更好一些。點(diǎn)擊后方法，無(wú)非就是把當(dāng)前面值加1

   clickLoadMore(e) {
    this.page = this.page + 1;
    this.getlist();

    uni.showToast({
     icon: 'none',
     title: "當(dāng)前狀態(tài)：" + e.detail.status
    })
   }

8、好了，貼上一整頁(yè)的代碼，分頁(yè)上下頁(yè)的，我還沒(méi)去，先留著后面有空改，另外沒(méi)有縮略圖的還沒(méi)弄

效果如下：

整頁(yè)的代碼如下：

官方提醒：使用category欄目循環(huán)標(biāo)簽的生成工具，填寫(xiě)參數(shù)就可以生成相關(guān)的代碼，每個(gè)參數(shù)后面都有用法解釋