thinkcmf+unicmf添加頁面 · 雜記

后端代碼 \api\portal\controller\ArticlesController.php ``` /** * 我的文章列表 * @throws \think\db\exception\DataNotFoundException * @throws \think\db\exception\ModelNotFoundException * @throws \think\exception\DbException */ public function my() { $params = $this->request->get(); $params['user_id'] = $this->getUserId(); $postService = new PortalPostService(); $data = $postService->postArticles($params); if (empty($this->apiVersion) || $this->apiVersion == '1.0.0') { $response = $data; } else { $response = ['list' => $data]; } $this->success('success!', $response); } ``` 前端代碼 \pages\myArticle\myArticle.vue ``` <template> <view class="index" v-bind:style="[{'min-height': secondHeight + 'px' }]"> <view class="list-box"> <view class="container_of_slide" v-for="(item,index) in list" :key="index"> <view class="slide_list" @touchstart="touchStart($event,index)" @touchend="touchEnd($event,index)" @touchmove="touchMove($event,index)" @tap="recover(index)" :style="{transform:'translate3d('+item.slide_x+'px, 0, 0)'}"> <view class="now-message-info" hover-class="uni-list-cell-hover" :style="{width:Screen_width+'px'}" @click="getDetail(item)"> <image class="icon-circle" :src="item.image_url" mode="widthFix"></image> <view class="list-right"> <view class="list-title">{{item.title}}</view> <view class="list-detail">{{item.description}}</view> </view> <view class="list-right-1"> {{item.datetime}} </view> </view> <view class="group-btn"> <view class="top btn-div" @tap="edit(item.id)"> 編輯 </view> <view class="removeM btn-div" @tap="removeM(index, item.id)"> 刪除 </view> </view> </view> </view> </view>  <view class="btn-plusempty" hover-class="bottom-btn-hover" @click="add"> <image src="../../static/jiahao.png" class="plusempty-img"></image> </view> </view> </template> <script> var api = require('@/common/api.js'), page = 1, reachbottom = true import { friendlyDate } from '@/common/util.js' export default { computed: { Screen_width() { return uni.getSystemInfoSync().windowWidth; } }, data() { return { start_slide_x: 0, btnWidth: 0, startX: 0, LastX: 0, startTime: 0, screenName: '', list: [], btuBottom: '0', secondHeight: '', }; }, onReachBottom: function() { if (reachbottom) { this.getList() } }, onShow() { const res = uni.getSystemInfoSync() // 計算主體部分高度,單位為px this.secondHeight = res.windowHeight this.list = [] page = 1 this.getList() }, onUnload() { page = 1 reachbottom = true }, methods: { getList() { console.log(page) api.get({ url: 'portal/articles/my', data: { page: page + ',7', field: 'id,post_title,thumbnail,published_time,comment_count,post_excerpt' }, success: data => { console.log(data) if (data.code == 1) { var newsList = data.data; var arr = newsList.map((news) => { return { id: news.id, title: news.post_title, datetime: news.published_time, image_url: news.thumbnail, description: news.post_excerpt, source: "", slide_x: 0 }; }); //console.log(data.code) page++ this.list = this.list.concat(arr); } if (newsList == '') { reachbottom = false uni.showToast({ "title": "已經加載全部", icon: "none", duration: 500 }); } } }); }, cancelEvent() { this.visible = false }, edit(id) { uni.navigateTo({ url: '/pages/myArticle/editArticle?id=' + id }); }, add() { uni.navigateTo({ url: '/pages/myArticle/addArticle' }); }, getDetail(detail) { uni.navigateTo({ url: '/pages/article/article?query=' + encodeURIComponent(JSON.stringify(detail)) }); }, // 滑動開始 touchStart(e, index) { //記錄手指放上去的時間 this.startTime = e.timeStamp; //記錄滑塊的初始位置 this.start_slide_x = this.list[index].slide_x; // 按鈕寬度 uni.createSelectorQuery() .selectAll('.group-btn') .boundingClientRect() .exec(res => { if (res[0] != null) { this.btnWidth = res[0][index].width * -1; } }); // 記錄上一次開始時手指所處位置 this.startX = e.touches[0].pageX; // 記錄上一次手指位置 this.lastX = this.startX; //初始化非當前滑動消息列的位置 this.list.forEach((item, eq) => { if (eq !== index) { item.slide_x = 0; } }); }, // 滑動中 touchMove(e, index) { const endX = e.touches[0].pageX; const distance = endX - this.lastX; // 預測滑塊所處位置 const duang = this.list[index].slide_x + distance; // 如果在可行區域內 if (duang <= 0 && duang >= this.btnWidth) { this.list[index].slide_x = duang; } // 此處手指所處位置將成為下次手指移動時的上一次位置 this.lastX = endX; }, // 滑動結束 touchEnd(e, index) { let distance = 10; const endTime = e.timeStamp; const x_end_distance = this.startX - this.lastX; if (Math.abs(endTime - this.startTime) > 200) { distance = this.btnWidth / -2; } // 判斷手指最終位置與手指開始位置的位置差距 if (x_end_distance > distance) { this.list[index].slide_x = this.btnWidth; } else if (x_end_distance < distance * -1) { this.list[index].slide_x = 0; } else { this.list[index].slide_x = this.start_slide_x; } }, // 點擊回復原狀 recover(index) { this.list[index].slide_x = 0; }, // 刪除 removeM(index, id) { // DELETE請求，取消收藏 api.delete({ url: 'portal/articles/' + id, success: data => { if (data.code == 1) { uni.showToast({ title: data.msg, duration: 1500, icon: 'success' }); if (reachbottom) { this.list = [] page = 1 this.getList() } else { this.list.splice(index, 1) } } } }); } } }; </script> <style> .btn-plusempty { width: 110upx; height: 110upx; background: #007bfa; position: fixed; bottom: 50upx; right: 20upx; border-radius: 100%; overflow: hidden; text-align: center; line-height: 110upx; } .plusempty-img { width: 50upx; height: 50upx; margin-top: 30upx; } </style> ``` pages.json "pages": [ { "path": "pages/myArticle/myArticle", "style": { "navigationBarTitleText": "我的文章" } ] \pages\user\user.vue menus: [ { name: '我的文章', icon: '../../static/fbwz.png', key: 3, path: '..../myArticle/myArticle' }, ]