Skip to content

U
uview-ui
Commit b6fac515 authored by wlxuqu's avatar wlxuqu
Browse files
Options

read-more组件使用动态id的形式

parent 3b6d9a36
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 41 deletions
pages.json
View file @ b6fac515
......@@ -6,7 +6,7 @@
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsB/swipeAction/index", //启动页面，必选
// "path": "pages/componentsC/test/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
......
pages/componentsC/test/index.vue
View file @ b6fac515
<template>
<u-card :title="title" :sub-title="subTitle" :thumb="thumb">
<view class="" slot="body">
<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
</view>
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
</view>
<view>
<view class="wed">
<!-- 单选日期 -->
<text @click="WE=!WE">开始</text>
<input type="text" v-model="result" />
<u-calendar v-model="WE" :mode="WEmode" @change="WEchange" start-text="开始" end-text="结束"></u-calendar>
</view>
<view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view>
</u-card>
<view class="wed">
<!-- 多选日期 -->
<text @click="WED=!WED">开始</text>
<input type="text" v-model="startDate" />
<text@click="WED=!WED">结束</text>
<input type="text" v-model="endDate" />
<u-calendar v-model="WED" :mode="WEDmode" @change="WEDchange" start-text="开始" end-text="结束"></u-calendar>
</view>
<view class="">
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-text="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
<u-read-more class="u-read-more" :toggle="true" show-height="100" font-size="12" close-tex t="更多" :shadow-style="shadowStyle">
<rich-text :nodes="content"></rich-text>
</u-read-more>
</view>
<view>
<!-- 字段少的表格 -->
<u-table>
<u-tr>
<u-th width="30%">学校</u-th>
<u-th>班级</u-th>
<u-th>年龄</u-th>
<u-th>爱好</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-checkbox-group @change="checkboxGroupChange1(index)">
<u-checkbox @change="checkboxChange" v-model="item.checked"></u-checkbox>
</u-checkbox-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
<view>
<u-table>
<u-tr>
<u-th width="38%">名称</u-th>
<u-th>别名</u-th>
<u-th>座右铭</u-th>
</u-tr>
<u-tr v-for="(item, index) in itemList" :key="index">
<u-td width="6%">
<u-radio-group v-model="value" label-disabled="true" @change="radioGroupChange(index)">
<u-radio @change="radioChange" :name="item.warehouseid">
</u-radio>
</u-radio-group>
</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.warehouseid}}</u-td>
<u-td>{{item.desc}}</u-td>
</u-tr>
</u-table>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '素胚勾勒出青花，笔锋浓转淡',
subTitle: '2020-05-15',
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
};
export default {
data() {
return {
// ----单选------------
WE: false,
WEmode: "date",
result: '',
// ---------------------
// ----多选--------------
WED: false,
WEDmode: 'range',
startDate: "",
endDate: '',
// ----------------------
content: `客户:山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
shadowStyle: {
// backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
paddingTop: "300rpx",
marginTop: "-300rpx",
},
//-------------单选框
checked: false,
checked1: false,
currentSort: 0,
itemList: {},
value: 'orange',
bangkList: [{
name: '英雄联盟',
alias: '撸啊撸',
else: '玩你**',
},
{
name: '守望先锋',
alias: '守望屁股',
else: '打你**',
},
{
name: '炉石传说',
alias: '非酋玩家',
else: '冲你**',
}
],
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
// value: false,
}
},
created() {
//页面一进来就发送请求
uni.request({
url: 'http://47.99.173.114:9999/wms/wmmdwarehouse/list',
method: 'GET',
success: res => {
this.itemList = res.data
}
})
},
methods: {
// 选中某个单选框时，由radio时触发
radioChange(e) {
// console.log(e);
},
// 选中任一radio时，由radio-group触发
radioGroupChange(index) {
console.log(index);
},
checkboxGroupChange1(index) {
console.log("下标为:" + index);
},
// 选中某个复选框时，由checkbox时触发
checkboxChange(e) {
console.log(e);
},
// 选中任一checkbox时，由checkbox-group触发
checkboxGroupChange(e) {
console.log("全部选按钮" + e);
},
WEchange(e) {
console.log(e); //打印出来的值
// ----------时间单选-----------
this.result = e.result
},
WEDchange(e) {
console.log(e); //打印出来的值
// ----------时间多选择-----------
this.startDate = e.startDate //赋值
this.endDate = e.endDate //赋值
},
}
}
};
</script>
<style scoped lang="scss">
.u-card-wrap {
background-color: $u-bg-color;
padding: 1px;
<style lang="scss">
.u-read-more {
border: 1px solid #007AFF;
margin-top: 10rpx;
}
.u-body-item {
font-size: 32rpx;
color: #333;
padding: 20rpx 10rpx;
.u-content {
font-size: 12;
}
.u-body-item image {
width: 120rpx;
flex: 0 0 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-left: 12rpx;
.wed {
rich-text {
font-size: 12rpx;
color: #0066CC
}
text {
width: 100rpx;
height: 100%;
}
width: 100%;
height: 100%;
display: flex;
border: 2rpx solid #007AFF;
// justify-content: center;
.red {
uni-view,
uni-text {
border: 1px solid #007aff;
}
}
}
</style>
\ No newline at end of file
</style>
uview-ui/components/u-read-more/u-read-more.vue
View file @ b6fac515
<template>
<view class="">
<view class="u-content" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
<view class="u-content" :class="[elId]" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
<slot></slot>
</view>
<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap"
......@@ -95,6 +95,7 @@
return {
isLongContent: false, // 是否需要隐藏一部分内容
showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
elId: this.$u.guid(), // 生成唯一class
};
},
mounted() {
......@@ -102,7 +103,7 @@
},
methods: {
init() {
this.$uGetRect('.u-content').then(res => {
this.$uGetRect('.' + this.elId).then(res => {
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
if (res.height > uni.upx2px(this.showHeight)) {
this.isLongContent = true;
......
uview-ui/libs/function/queryParams.js
View file @ b6fac515
......@@ -19,7 +19,7 @@ function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
switch (arrayFormat) {
case 'indices':
// 结果: ids[0]=1&ids[1]=2&ids[2]=3
for (let i = 0; i < value.length; i++) {
for (i = 0; i < value.length; i++) {
_result.push(key + '[' + i + ']=' + value[i])
}
break;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment