【程式碼】微信小程式 簡單一個頁面,網上圖片展示
阿新 • • 發佈:2019-02-09
//wxss
/* 基礎樣式 */ view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group,radio,slider,switch,action-sheet,action-sheet-item,action-sheet-cancel,modal,toast,loading,navigator,audio,image,video,map,canvas { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } page { height: 100%; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } checkbox-group, radio-group{ display:block; } :before, :after , ::before, ::after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .c-minheight { min-height: 80px; } .c-full { width: 100%; height: 100%; } .c-block { display: block; } .c-autosize { width: auto; height: auto; } .c-fullwidth { width: 100%; } .c-fullheight { height: 100%; } .c-initHide{ opacity:0 !important; } .c-ellipse{ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; } /* 自定義樣式 */ .listitemWrap{padding: 15px 56.25rpx;} .image_thumbView{width: 637.5rpx; height: 637.5rpx; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;} .image_thumb{width: 100%; height: 100%; background-color: transparent; } .text_description{display: block; font-size: 13px; color: rgb(122, 122, 122); text-align: justify; line-height: 1.7em; margin-bottom: 10px;} .listitemInfoWrap{padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom-color: rgb(237, 237, 237); border-bottom-width: 1px; border-bottom-style: solid; } .likeinfo{display: flex; width: 80px; justify-content: space-between; align-items: center; } .likebtn{width: 28px; height: 28px; background-color: transparent; } .likeinfo_count{font-size: 12px; color: rgb(148, 148, 148); padding: 3px 10px; background-color: rgb(240, 240, 240); border-radius: 4px; } .listitem_creattime{font-size: 12px; color: rgb(186, 186, 186); padding-right: 2px; } .wx-text_hDebWU{margin-bottom: 15px; text-align: center; padding-bottom: 8px; display: block; border-bottom: 1px solid rgb(237, 237, 237); margin-top: 15px; } .listitem01{background-color: rgb(255, 255, 255); margin-bottom: 37.5rpx; } .listitem-navigator2{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx;} .wx-image_tBcdCT2{width: 80px; height: 80px; } .wx-view_cPj0ok2{margin-left: 10px; flex: 1 1 0%; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; } .wx-text_TvHPc92{font-size: 16px; -webkit-line-clamp: 2; } .wx-text_LS2Jup2{font-size: 13px; color: #a1a1a1; } .wx-view_adF7Mw{display: flex; justify-content: space-between; padding: 18.75rpx; padding-right: 18.75rpx; } .wx-view_2gazUr{display: flex; padding-left: 18.75rpx; } .wx-view_DKe6UT{display: flex; justify-content: space-between; align-items: center; min-width: 40px; margin-right: 15px; } .wx-image_6E2A1o{width: 16px; height: 16px; margin-right: 10px; } .wx-text_id0VJj{font-size: 12px; color: #8c8c8c; } .wx-text_9Wn0Di{font-size: 12px; color: rgb(156, 156, 156); padding-right: 18.75rpx; } .listitem-navigator{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx; border-bottom: 1px solid rgb(237, 237, 237); border-bottom-color: rgba(237,237,237,1); }
//wxml
<view class="listWrap" data-c_e_id="wx_view848f9f58"> <view class="listitem01" data-c_e_id="wx_viewcdacad14"> <view class="wx-view_pOFBSt" data-c_e_id="wx_viewbe7a81e9"/> </view> </view> <view bindtap="tap_de01fdb6" class="listitemWrap" data-c_e_id="wx_view687aaf2e"> <view class="image_thumbView" data-c_e_id="wx_view1ae8f9cf"> <navigator class="image_thumbView" data-c_e_id="wx_navigatora2558f19" hover-class="navigator-hover" url="../detail/detail"> <image class="image_thumb" data-c_e_id="wx_image7450ae92" mode="aspectFit" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"/> </navigator> </view> <text class="text_description" data-c_e_id="wx_text354d27cc">小巧可愛的案頭雅物。</text> <view class="listitemInfoWrap" data-c_e_id="wx_view309b339d"> <view class="likeinfo" data-c_e_id="wx_viewcc4e89cb"> <icon class="wx-icon_tijX5I" data-c_e_id="wx_icon_f4dede3d" size="23" type="success"/> </view> <text class="listitem_creattime" data-c_e_id="wx_text8c8804b3">2016.10.29</text> </view> </view> <textarea class="c-block c-fullwidth wx-textarea_V5MakO" data-c_e_id="wx_textarea_5ef219ef" name="textarea1" placeholder="This is a textarea" type="textarea"/> <navigator class="wx-navigator_jGU05L" data-c_e_id="wx_navigator_dce6bec8" hover-class="navigator-hover" open-type="redirect"/> <button class="wx-button_Y3PDck" data-c_e_id="wx_button_408d3dd3" hover-class="button-hover" size="default" type="default"> Next </button>
// js
// 引入coolsite360互動配置設定 require('coolsite.config.js'); // 獲取全域性應用程式例項物件 var app = getApp(); // 建立頁面例項物件 Page({ /** * 頁面名稱 */ name: "index", /** * 頁面的初始資料 */ data: { }, /** * 生命週期函式--監聽頁面載入 */ onLoad() { // 註冊coolsite360互動模組 app.coolsite360.register(this); }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady() { }, /** * 生命週期函式--監聽頁面顯示 */ onShow() { // 執行coolsite360互動元件展示 app.coolsite360.onShow(this); }, /** * 生命週期函式--監聽頁面隱藏 */ onHide() { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload() { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh() { }, //以下為自定義點選事件 tap_de01fdb6: function (e) { //觸發coolsite360互動事件 app.coolsite360.fireEvent(e, this); }, })
//json
{ "navigationBarTitleText": "拿捏圖片"}