windows怎么做网站,有没有做头像的网站,房地产基础知识,街道门户网站的建设思路社区图片页面 scroll-view scroll-view | uni-app官网 (dcloud.net.cn)
可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中#xff0c;区域滚动的性能不及页面滚动。
templateview classpicsscroll-view classleft…社区图片页面 scroll-view scroll-view | uni-app官网 (dcloud.net.cn)
可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中区域滚动的性能不及页面滚动。
templateview classpicsscroll-view classleft scroll-y scroll-y 允许纵向滚动view clickleftClickHandle(index,item.id) :classactiveindex?active:v-for(item,index) in cates :keyitem.id{{item.title}}/view/scroll-viewscroll-view classright scroll-yview classitem v-foritem in secondData :keyitem.idimage clickpreviewImg(item.img_url) :srcitem.img_url/imagetext{{item.title}}/text/viewtext v-ifsecondData.length 0暂无数据/text/scroll-view/view
/templatescriptexport default {//如何做高亮显示active 当前选中分类的索引时 表达式 :classactiveindex?active: data() {return {cates: [],active: 0,secondData: []}},methods: {//获取分类数据async getPicsCate() {const res await this.$myRequest({url: /api/getimgcategory})this.cates res.data.messagethis.leftClickHandle(0, this.cates[0].id)//根据一级分类的初始ID获取了二级分类},//获取右侧图片数据async leftClickHandle(index, id) {this.active index //高亮左侧使用的// 获取右侧的数据const res await this.$myRequest({url: /api/getimages/ id})this.secondData res.data.message},previewImg(current) {//预览图片const urls this.secondData.map(item {//连续预览图片return item.img_url})uni.previewImage({current,//点击的当前图片urls})}},onLoad() {this.getPicsCate()}}
/scriptstyle langscsspage {height: 100%;}.pics {height: 100%;display: flex;.left {width: 200rpx;height: 100%;border-right: 1px solid #eee;view {height: 60px;line-height: 60px;color: #333;text-align: center;font-size: 30rpx;border-top: 1px solid #eee;}.active {//选中的样式background: $shop-color;color: #fff;}}.right {height: 100%;width: 520rpx;margin: 10rpx auto;.item {image {width: 520rpx;height: 520rpx;border-radius: 5px;}text {font-size: 30rpx;line-height: 60rpx;}}}}
/style获取图片分类
接口地址 /api/getimgcategory
请求方式GET
参数无
数据格式
{status:0,message:[{title:家居生活,id:14},{title:摄影设计,id:15},{title:明星美女,id:16},{title:空间设计,id:17},{title:古典美女,id:24}]
}二级图片列表
接口地址/api/getimages/:cateid
请求方式GET
参数cateid: 图片的类别id传入url写法 /api/getimages/23
数据格式
{status:0,message:[{id:40,title:欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果,img_url:http://demo.dtcms.net/upload/201504/18/thumb_201504181246376332.jpg,zhaiyao:继上编欧式客厅装修效果图之后今天小编为大家带来的是一组不同类型的欧式卧室装修效果图。欧式卧室的设计风格按不同的地域文化可分为北欧卧室、简欧卧室和传统欧式卧室。在中国因为欧式风格继承了巴洛克风格中豪华、动感、多变的视觉效果也吸取了洛可可风格中唯美、律…},]
}
