软件开发培训班 >> 编程开发 >> CSS


html加css样式实现js美食项目首页示例代码

浠嬬粛锛氱編椋熸澃棣栭〉

杩欎釜鏄疆鎾浘鏁堟灉锛氬埄鐢ㄤ簡element ui妗嗘灦鎼缓鐨刪tml銆乧ss鏍峰紡锛岀劧鍚庡啀閫氳繃vue鎸囦护鍜宒ata瀛樺偍鏁版嵁鍜宮ethods鏂规硶鍦ㄦ搷浣渄ata閲岄潰鐨勬暟鎹潵瀹屾垚鏁版嵁浜や簰缁ц�屾覆鏌撳埌椤甸潰涓婂氨濡備笅鍥俱�?/p>

杩欎釜鏄唴瀹圭簿閫夐〉鏁堟灉锛氫篃鏄埄鐢ㄤ簡element ui妗嗘灦鎼缓鐨刪tml銆乧ss鏍峰紡

杩囩▼锛?/h2>

寮曠敤浜唀lement ui妗嗘灦鎼缓鐨勮疆鎾浘妗嗘灦锛屽埄鐢ㄦ暟鎹氦浜掑畬鎴愭晥鏋溿�?/p>

鍏堝畨瑁卐lement ui锛屽啀main.js閲岄潰寮曞叆element ui

import elementUi from 'element-ui'
import  'element-ui/lib/theme-chalk/index.css'
Vue.use(elementUi)

杩欐槸html缁撴瀯

杩欐槸css鏍峰紡锛?/p>

鏁版嵁浜や簰杩囩▼锛堣鎼厤鍐欏ソ鐨勭粍浠讹級锛?/p> 

<script>
import MenuCard from '@/components/menu-card.vue' //寮曞叆鐨勭粍浠?
import Waterfall from '@/components/waterfall.vue'//寮曞叆鐨勭粍浠?
import {getBanner,getMenus} from '@/service/api.js'//寮曞叆鐨勫皝瑁呭ソ鐨刟pi鏂规硶
// 寮曞叆 娉ㄥ唽 浣跨敤
export default {
  name: 'home',
  components: {
    MenuCard: MenuCard,
    Waterfall
  },
  data(){
    return {
      banners:[],
      menuList:[],
      page:1,
      pages:5
    }
  },
  mounted(){
    getBanner().then(({data})=>{
      this.banners=data.list;
      //  console.log(this.banners)
    }),
    // 1.
    getMenus({page:this.page}).then(({data})=>{
      console.log(data)
      // this.menuList=data.list;褰撲紶浜嗛〉鐮佸氨涓嶈兘杩欎箞璧嬪�间簡
      this.menuList=data.list;//瀛樹簡绗竴椤电殑鏁版嵁
      // this.pages=Math.ceil(data.total/data.page_size)
    })
  },
  methods:{
    loadingMenuHanle(){
      console.log('鍦ㄥ閮ㄧ洃鍚殑婊氬姩')
      this.page++;
      // 2.
      if(this.page > this.pages){
        this.$refs.waterfall.isloading=false;
        return;
      }
      this.$refs.waterfall.isloading=true;
      getMenus({page:this.page}).then(({data})=>{
        this.menuList.push(...data.list);//鍦ㄧ涓�娆℃暟鎹姞杞藉畬鎴愬悗鍐嶇户缁坊鍔?push)娓叉煋浜旀潯鏁版嵁
        this.$refs.waterfall.isloading=false;
     })
    }
  }
}
</script>

娉ㄦ剰浜嬮」锛?/h2>

鍦ㄥ紩鍏ユ槸涓�瀹氳娉ㄦ剰寮曞叆css鐨勮矾寰勶紝灏变粠element-ui寮�濮嬫壘鐪嬬湅娌′竴涓祵濂楀叧绯荤殑鏂囦欢澶瑰悕鏄笉鏄竴鐩达紝鍙﹀鍦ㄦ渶鏂扮増鏈殑element-ui涓璽heme-default灏卞簲璇ヨ鏀逛负theme-chal锛岀壒鍒渶瑕佹敞鎰忕殑鏄粯璁ょ殑杞挱鏄瀭鐩寸殑锛屽鏋滄兂鏀逛负姘村钩锛岄偅涔堥渶瑕佸皢direction: 'horizontal'銆?/p>

鎬荤粨锛?/h2>

杞挱鍥惧師鐞嗭細瀵规簮鏁版嵁浣滀笅澶勭悊锛屽皢鏈熬鏁版嵁澶嶅埗涓�浠斤紝鎻掑叆鍒版渶鍓嶉潰銆傚皢鍘熸潵绗竴鏉℃暟鎹鍒跺埌鏈�鍚庨潰锛屽悗闈㈢殑鍥剧墖鍦ㄦ粦鍒板墠闈㈠浘鐗囩殑鏃跺�?閲嶇疆涓嬫爣锛岃鍥句笂灏辨棤闄愭粴鍔ㄤ簡

浠ヤ笂灏辨槸js缇庨椤圭洰棣栭〉閮ㄥ垎瀹炵幇鐨勫姛鑳戒唬鐮佸強绠�浠嬬殑璇︾粏鍐呭锛屾洿澶氬叧浜巎s椤圭洰棣栭〉閮ㄥ垎鍔熻兘瀹炵幇鐨勮祫鏂欒鍏虫敞鑴氭湰涔嬪鍏跺畠鐩稿叧鏂囩珷锛?/p>