谜之Bug,iPhone上没有,只在安卓上复现
横向无法拖动,iPhone上可以拖动。
wxml
<!--index.wxml--> < view class = "container" style = "background-image:url({{geubimage}})" > < view class = "head" > < scroll-view class = "geub-list" scroll-x> < view class = "item active" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > < view class = "xnxi" > < view class = "name" >陈一发儿</ view > < view class = "ffsi" >粉丝:1万</ view > </ view > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > < view class = "xnxi" > < view class = "name" >陈一发儿</ view > < view class = "ffsi" >粉丝:1万</ view > </ view > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > < view class = "item" > < image src = "https://bed.sihuhello.com/images/Ch4A8QtiD7.jpg" mode = "aspectFit" ></ image > </ view > </ scroll-view > </ view > </ view > |
wxss
/**index.wxss**/ .container { width : 100% ; padding : 0 ; position : fixed ; background-attachment : fixed ; background-repeat : no-repeat ; background- size : cover; justify- content : center ; } /* head */ .head { width : 100% ; } .head .geub-list { width : 100% ; height : 200 rpx; white-space : nowrap ; display : flex; justify- content : flex-start; align-items: center ; } .head .item { width : 200 rpx; margin : 25 rpx 10 rpx; background : rgba( 100 , 100 , 100 , 0.2 ); display : inline-flex; overflow : hidden ; justify- content : space-between; align-items: center ; } .head .item image { width : 200 rpx; height : 200 rpx; } .head .item .xnxi { width : 180 rpx; color : #fff ; font-size : 13pt ; display : none ; } |
js
//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World' , geubimage: "https://bed.sihuhello.com/images/nWp5F3MHmT.jpg?x-oss-process=image/resize,m_fixed,h_1600,w_900" , userInfo: {} }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log( 'onLoad' ) var that = this //调用应用实例的方法获取全局数据 app.getUserInfo( function (userInfo) { //更新数据 that.setData({ userInfo: userInfo }) }) } }) |