|
- <template>
- <view class="page">
- <view class="diss_list_bg">
- <view class="diss_list_biao"></view>
- <view class="diss_list_lun_bg">
- <view class="diss_list_lun_bg1">
- <view class="diss_list_lun_bg2">
- <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
- <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
- <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
- </view>
- <text class="diss_list_lun_text">354评论</text>
- </view>
- <image class="diss_list_lun_bg_img1" src="../../image/friend/Vectorclose.png" />
- </view>
- <list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}>
- <cell class="cell" onclick={this.itemClick}>
- <view class="cell1">
- <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
- <view class="listView_text">
- <text class="listView_text1"> Philip Schultz </text>
- <text class="listView_text2"> 说明这是一款注定要火的游戏 </text>
- <view class="listView_text_more" @click="itemClickmore">
- <text> 更多</text>
- <image class="diss_list_lun_bg2_img" src="../../image/person/Groupxuan.png" />
- </view>
- </view>
- <text class="title">{item.title}</text>
- </view>
- <view v-for="(itemlun,index) in item.pinlun" :data-index="index" class="cell2">
- <image class="diss_list_lun_bg2_img1" src="../../image/collect/ic_headIcon.png" />
- <view class="listView_text">
- <text class="listView_text1"> Philip Schultz </text>
- <text class="listView_text2"> {itemlun.desc} </text>
- </view>
- <text class="title">{itemlun.diss_title}</text>
- </view>
- <!-- <view v-if="item.pinlun" :data-index="index" class="cell2">
- <image class="diss_list_lun_bg2_img" src="../../image/collect/ic_headIcon.png" />
- <view class="listView_text">
- <text class="listView_text1"> Philip Schultz </text>
- <text class="listView_text2"> {item.pinlun.desc} </text>
- </view>
- <text class="title">{item.pinlun.diss_title}</text>
- </view> -->
- </cell>
- </list-view>
- </view>
- <view class="input_diss_bg ">
- <view class="input_diss_bg1">
- <input class="input_diss" placeholder-style="color:#B6B6B6" style="padding-left:5px" type="text"
- :placeholder="placeholderPhone"></input>
- <image class="input_diss_img" src="../../image/friend/xiao.png" />
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'main',
- apiready() { //like created
- this.initData();
- // this.initlist();
- },
- data() {
- return {
- placeholderPhone: "内容",
- valuePhone: "",
- dataList: [{
- title: '项目1',
- desc: "说明这是一款注定要火的游戏",
- diss: true,
- pinlun: [
- {
- diss_title: '评论1',
- desc: "说明这是一款注定要火的游戏",
- },
- {
- diss_title: '评论2',
- desc: "说明这是一款注定要火的游戏",
- },
- {
- diss_title: '评论3',
- desc: "说明这是一款注定要火的游戏",
- },
- ]
- },
- {
- title: '项目2',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- },
- {
- title: '项目3',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- },
- {
- title: '项目4',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- },
- {
- title: '项目5',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- },
- {
- title: '项目6',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- },
- {
- title: '项目7',
- desc: "说明这是一款注定要火的游戏",
- diss: false,
- pinlun: []
- }
- ]
- };
- },
- methods: {
- initData() {
- var dataList = this.dataList;
- var listView = document.getElementById('listView');
- // console.log("dataList" + JSON.stringify(dataList));
- listView.load({
- data: dataList
- });
- },
- onscrolltolower() {
- // this.initData(true);
- },
- itemClickmore(e) {
- var that = this;
- var listView = document.getElementById('listView');
- var id = e.currentTarget.index;
- this.dataList[id].diss = !this.dataList[id].diss;
- if (!this.dataList[id].diss) {
- this.dataList[id].pinlun = [];
- } else {
- var pinlin = [{
- diss_title: '评论5',
- desc: "说明这是一款注定要火的游戏",
- },
- {
- diss_title: '评论6',
- desc: "说明这是一款注定要火的游戏",
- },
- {
- diss_title: '评论7',
- desc: "说明这是一款注定要火的游戏",
- },
- ];
- this.dataList[id].pinlun = pinlin;
- }
- var datalist1 = this.dataList[id];
- // {
- // diss_title: '评论1',
- // desc: "说明这是一款注定要火的游戏",
- // },
- // {
- // diss_title: '评论1',
- // desc: "说明这是一款注定要火的游戏",
- // },
- // {
- // diss_title: '评论1',
- // desc: "说明这是一款注定要火的游戏",
- // }
- // console.log("更多" + id + JSON.stringify(this.dataList));
- try {
- // listView.load({
- // data: datalist1
- // });
- listView.update({
- item: datalist1,
- index: id
- }, function (ret) {
- console.log("error------" + ret);
- })
- } catch (error) {
- console.log("error" + error);
- }
- },
- itemClick(e) {
- api.alert({
- msg: '当前项索引:' + e.currentTarget.index
- });
- }
- }
- };
- </script>
- <style>
- .page {
- height: 100%;
- background-color: black;
- }
- .diss_list_bg {
- background: #313139;
- border-radius: 31.5px;
- position: absolute;
- height: 35rem;
- width: 100%;
- bottom: 0%;
- flex-direction: column;
- /* justify-content: center; */
- align-items: center;
- }
- .diss_list_biao {
- background: #525255;
- border-radius: 100px;
- height: 3px;
- width: 63px;
- position: absolute;
- top: 1rem;
- }
- .diss_list_lun_bg {
- position: absolute;
- top: 7%;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- width: 20rem;
- height: 34px;
- /* background: #12128a; */
- /* padding-right: 0.5rem; */
- }
- .diss_list_lun_bg1 {
- width: 18rem;
- height: 34px;
- background: #3c3c3e;
- border-radius: 57px;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- background-position: left initial top initial;
- margin-right: 0px;
- margin-left: 0px;
- padding-left: 10px;
- padding-right: 10px;
- }
- .diss_list_lun_bg_img1 {
- width: 1rem;
- height: 1rem;
- }
- .diss_list_lun_text {
- color: #838383;
- font-size: 13px;
- }
- .diss_list_lun_bg2 {
- width: 5rem;
- height: 34px;
- flex-direction: row;
- align-items: center;
- position: relative;
- /* align-items: flex-start; */
- /* justify-content: left; */
- }
- .listView_text_more {
- flex-direction: row;
- align-items: center;
- }
- .diss_list_lun_bg2_img {
- width: 1.6rem;
- height: 1.5rem;
- /* margin: 0px -0.4rem; */
- margin-right: -0.4rem;
- /* margin-left: 1rem; */
- /* position: absolute; */
- }
- .diss_list_lun_bg2_img1 {
- width: 1.7rem;
- height: 1.3rem;
- /* margin: 0px -0.4rem; */
- margin-right: -0.4rem;
- /* margin-left: 1rem; */
- /* position: absolute; */
- }
- .input_diss_bg {
- width: 100%;
- height: 90px;
- background-color: black;
- position: absolute;
- bottom: 0%;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
- .input_diss_bg1 {
- width: 100%;
- height: 90px;
- /* background-color: rgb(196, 47, 47); */
- position: absolute;
- bottom: 0%;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
- .input_diss {
- background-color: #444444;
- border-radius: 7px;
- box-sizing: border-box;
- position: absolute;
- width: 80%;
- height: 50px;
- z-index: 888;
- /*去边框*/
- border: 0;
- color: cornsilk;
- }
- .input::-webkit-outer-spin-button,
- .input::-webkit-inner-spin-button {
- -webkit-appearance: none !important;
- margin: 0;
- }
- .input_diss_img {
- z-index: 999;
- width: 30px;
- height: 30px;
- position: absolute;
- right: 11%;
- }
- .main {
- width: 100%;
- position: absolute;
- height: 24rem;
- top: 5.5rem;
- }
- .cell {
- /* padding: 8px; */
- /* height: 4rem; */
- border-bottom: 0.5px solid #ddd;
- /* background-color: rgb(160, 19, 19); */
- flex-direction: column;
- /* justify-content: flex-start; */
- align-items: space-around;
- }
- .cell1 {
- flex-direction: row;
- justify-content: space-around;
- align-items: flex-start;
- padding: 8px;
- /* height: 4rem; */
- }
- .cell2 {
- flex-direction: row;
- justify-content: space-around;
- align-items: flex-start;
- padding-left: 5rem;
- }
- .listView_text {
- flex-direction: column;
- align-items: center;
- text-align: left;
- /* height: 4rem; */
- width: 16rem;
- /* background-color: rgb(25, 180, 128); */
- margin-left: 1rem;
- /* height: 60px; */
- }
- .listView_text1 {
- font-size: 1rem;
- color: #898a8f;
- }
- .listView_text2 {
- font-size: 1rem;
- color: #b0bcbe;
- }
- /* .cell:active {
- background-color: #ddd;
- } */
- .title {
- /* font-weight: bold; */
- /* font-size: 0.8rem; */
- /* color: #000; */
- /* margin-right: 1rem; */
- width: 5rem;
- /* height: 4rem; */
- text-align: center;
- font-size: 1rem;
- color: #898a8f;
- /* background-color: rgb(19, 170, 64); */
- }
- .subtitle {
- color: #333;
- }
- .footer {
- justify-content: center;
- align-items: center;
- }
- </style>
复制代码 |
|